PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-01-23 05:25:01 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

initialize v2

Browse Source
This commit is contained in:
wok 2024-06-03 20:19:11 +09:00
parent 800285f2cd
commit 4f0fc2adab
575 changed files with 16 additions and 107382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
.gitignore vendored
View File

@ -1,77 +1 @@
tmp
dummy
node_modules
__pycache__
server/upload_dir/
server/MMVC_Client_v13/
server/MMVC_Client_v15/
server/so-vits-svc-40/
server/so-vits-svc-40v2/
server/DDSP-SVC/
server/RVC/
server/keys
server/info
server/in.wav
server/out.wav
server/G_*.pth
server/train_config.json
server/stored_setting.json
# v.1.3.xテスト用モデルフォルダ
server/v13
server/model_hubert
server/model_so-vits-svc-40v2_tsukuyomi/
server/model_so-vits-svc-40v2_amitaro/
server/model_so-vits-svc-40/
server/model_so-vits-svc-40_mahiro/
server/model_so-vits-svc-40_amitaro/
server/model_so-vits-svc-40_tsukuyomi/
server/model_so-vits-svc-40_kikotokurage
model_DDSP-SVC/
server/model_sovits
server/test
server/memo.md
client/lib/dist
client/lib/worklet/dist
client/demo/public/models
client/demo/public/models_
client/demo/dist/models
client/demo/dist_web
client/demo/src/001_provider/backup
# client/demo/dist/ # demo用に残す
docker/cudnn/
server/pretrain/
server/weights/
server/model_dir/
server/model_dir2/
server/weights_/
server/weights__/
server/models/
server/samples.json
server/samples_0003_t.json
server/samples_0003_o.json
server/samples_0003_t2.json
server/samples_0003_o2.json
server/samples_0003_d2.json
server/samples_0004_t.json
server/samples_0004_o.json
server/samples_0004_d.json
server/test_official_v1_v2.json
server/test_ddpn_v1_v2.json
server/vcclient.log
start_trainer.sh
# venv
venv/
beatrice_internal_api.cp310-win_amd64.pyd
108_average_110b_10.bin
server/model_dir_static/Beatrice-JVS

24
.vscode/settings.json vendored
View File

@ -1,9 +1,17 @@
{
"files.associations": {
"*.css": "postcss"
},
"workbench.colorCustomizations": {
"tab.activeBackground": "#65952acc"
}
}
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
},
"[markdown]": {
"editor.wordWrap": "off"
},
"flake8.args": ["--max-line-length=1024", "--ignore=E402,E203,E722"],
"workbench.colorCustomizations": {
"tab.activeBackground": "#65952acc"
},
"black-formatter.args": ["--line-length", "550"],
"python.testing.pytestArgs": ["tests"],
"python.testing.unittestEnabled": false,
"python.testing.pytestEnabled": true,
"mypy-type-checker.args": ["--config-file=mypy.ini"]
}

1
Hina_Mod_Kaggle_Real_Time_Voice_Changer.ipynb
View File

File diff suppressed because one or more lines are too long

351
Hina_Modified_Realtime_Voice_Changer_on_Colab.ipynb
View File

@ -1,351 +0,0 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {
"id": "view-in-github",
"colab_type": "text"
},
"source": [
"<a href=\"https://colab.research.google.com/github/hinabl/voice-changer-colab/blob/master/Hina_Modified_Realtime_Voice_Changer_on_Colab.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
]
},
{
"cell_type": "markdown",
"metadata": {
"id": "Lbbmx_Vjl0zo"
},
"source": [
"### w-okada's Voice Changer | **Google Colab**\n",
"\n",
"---\n",
"\n",
"##**READ ME - VERY IMPORTANT**\n",
"\n",
"This is an attempt to run [Realtime Voice Changer](https://github.com/w-okada/voice-changer) on Google Colab, still not perfect but is totally usable, you can use the following settings for better results:\n",
"\n",
"If you're using a index: `f0: RMVPE_ONNX | Chunk: 112 or higher | Extra: 8192`\\\n",
"If you're not using a index: `f0: RMVPE_ONNX | Chunk: 96 or higher | Extra: 16384`\\\n",
"**Don't forget to select your Colab GPU in the GPU field (<b>Tesla T4</b>, for free users)*\n",
"> Seems that PTH models performance better than ONNX for now, you can still try ONNX models and see if it satisfies you\n",
"\n",
"\n",
"*You can always [click here](https://rentry.co/VoiceChangerGuide#gpu-chart-for-known-working-chunkextra\n",
") to check if these settings are up-to-date*\n",
"<br><br>\n",
"\n",
"---\n",
"\n",
"###Always use Colab GPU (**VERY VERY VERY IMPORTANT!**)\n",
"You need to use a Colab GPU so the Voice Changer can work faster and better\\\n",
"Use the menu above and click on **Runtime** » **Change runtime** » **Hardware acceleration** to select a GPU (**T4 is the free one**)\n",
"\n",
"---\n",
"\n",
"<br>\n",
"\n",
"# **Credits and Support**\n",
"Realtime Voice Changer by [w-okada](https://github.com/w-okada)\\\n",
"Colab files updated by [rafacasari](https://github.com/Rafacasari)\\\n",
"Recommended settings by [Raven](https://github.com/ravencutie21)\\\n",
"Modified again by [Hina](https://huggingface.co/HinaBl)\n",
"\n",
"Need help? [AI Hub Discord](https://discord.gg/aihub) » ***#help-realtime-vc***\n",
"\n",
"---"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"id": "86wTFmqsNMnD",
"cellView": "form"
},
"outputs": [],
"source": [
"#=================Updated=================\n",
"# @title **[1]** Clone repository and install dependencies\n",
"# @markdown This first step will download the latest version of Voice Changer and install the dependencies. **It can take some time to complete.**\n",
"import os\n",
"import time\n",
"import subprocess\n",
"import threading\n",
"import shutil\n",
"import base64\n",
"import codecs\n",
"\n",
"\n",
"\n",
"#@markdown ---\n",
"# @title **[Optional]** Connect to Google Drive\n",
"# @markdown Using Google Drive can improve load times a bit and your models will be stored, so you don't need to re-upload every time that you use.\n",
"\n",
"Use_Drive=False #@param {type:\"boolean\"}\n",
"\n",
"from google.colab import drive\n",
"\n",
"if Use_Drive==True:\n",
" if not os.path.exists('/content/drive'):\n",
" drive.mount('/content/drive')\n",
"\n",
" %cd /content/drive/MyDrive\n",
"\n",
"\n",
"externalgit=codecs.decode('uggcf://tvguho.pbz/j-bxnqn/ibvpr-punatre.tvg','rot_13')\n",
"rvctimer=codecs.decode('uggcf://tvguho.pbz/uvanoy/eipgvzre.tvg','rot_13')\n",
"pathloc=codecs.decode('ibvpr-punatre','rot_13')\n",
"\n",
"from IPython.display import clear_output, Javascript\n",
"\n",
"def update_timer_and_print():\n",
" global timer\n",
" while True:\n",
" hours, remainder = divmod(timer, 3600)\n",
" minutes, seconds = divmod(remainder, 60)\n",
" timer_str = f'{hours:02}:{minutes:02}:{seconds:02}'\n",
" print(f'\\rTimer: {timer_str}', end='', flush=True) # Print without a newline\n",
" time.sleep(1)\n",
" timer += 1\n",
"timer = 0\n",
"threading.Thread(target=update_timer_and_print, daemon=True).start()\n",
"\n",
"!pip install colorama --quiet\n",
"from colorama import Fore, Style\n",
"\n",
"print(f\"{Fore.CYAN}> Cloning the repository...{Style.RESET_ALL}\")\n",
"!git clone --depth 1 $externalgit &> /dev/null\n",
"print(f\"{Fore.GREEN}> Successfully cloned the repository!{Style.RESET_ALL}\")\n",
"%cd $pathloc/server/\n",
"\n",
"# Read the content of the file\n",
"file_path = '../client/demo/dist/assets/gui_settings/version.txt'\n",
"\n",
"with open(file_path, 'r') as file:\n",
" file_content = file.read()\n",
"\n",
"# Replace the specific text\n",
"text_to_replace = \"-.-.-.-\"\n",
"new_text = \"Google.Colab\" # New text to replace the specific text\n",
"\n",
"modified_content = file_content.replace(text_to_replace, new_text)\n",
"\n",
"# Write the modified content back to the file\n",
"with open(file_path, 'w') as file:\n",
" file.write(modified_content)\n",
"\n",
"print(f\"Text '{text_to_replace}' has been replaced with '{new_text}' in the file.\")\n",
"\n",
"print(f\"{Fore.CYAN}> Installing libportaudio2...{Style.RESET_ALL}\")\n",
"!apt-get -y install libportaudio2 -qq\n",
"\n",
"!sed -i '/torch==/d' requirements.txt\n",
"!sed -i '/torchaudio==/d' requirements.txt\n",
"!sed -i '/numpy==/d' requirements.txt\n",
"\n",
"\n",
"print(f\"{Fore.CYAN}> Installing pre-dependencies...{Style.RESET_ALL}\")\n",
"# Install dependencies that are missing from requirements.txt and pyngrok\n",
"!pip install faiss-gpu fairseq pyngrok --quiet\n",
"!pip install pyworld --no-build-isolation --quiet\n",
"# Install webstuff\n",
"import asyncio\n",
"import re\n",
"!pip install playwright\n",
"!playwright install\n",
"!playwright install-deps\n",
"!pip install nest_asyncio\n",
"from playwright.async_api import async_playwright\n",
"print(f\"{Fore.CYAN}> Installing dependencies from requirements.txt...{Style.RESET_ALL}\")\n",
"!pip install -r requirements.txt --quiet\n",
"clear_output()\n",
"print(f\"{Fore.GREEN}> Successfully installed all packages!{Style.RESET_ALL}\")"
]
},
{
"cell_type": "code",
"source": [
"#@title **[Optional]** Upload a voice model (Run this before running the Voice Changer)\n",
"import os\n",
"import json\n",
"from IPython.display import Image\n",
"import requests\n",
"\n",
"model_slot = \"0\" #@param ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103', '104', '105', '106', '107', '108', '109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123', '124', '125', '126', '127', '128', '129', '130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '140', '141', '142', '143', '144', '145', '146', '147', '148', '149', '150', '151', '152', '153', '154', '155', '156', '157', '158', '159', '160', '161', '162', '163', '164', '165', '166', '167', '168', '169', '170', '171', '172', '173', '174', '175', '176', '177', '178', '179', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189', '190', '191', '192', '193', '194', '195', '196', '197', '198', '199']\n",
"\n",
"!rm -rf model_dir/$model_slot\n",
"#@markdown **[Optional]** Add an icon to the model\n",
"icon_link = \"https://cdn.donmai.us/sample/12/57/__rin_penrose_idol_corp_drawn_by_juu_ame__sample-12579843de9487cf2db82058ba5e77d4.jpg\" #@param {type:\"string\"}\n",
"icon_link = '\"'+icon_link+'\"'\n",
"!mkdir model_dir\n",
"!mkdir model_dir/$model_slot\n",
"#@markdown Put your model's download link here `(must be a zip file)` only supports **weights.gg** & **huggingface.co**\n",
"model_link = \"https://huggingface.co/HinaBl/Rin-Penrose/resolve/main/RinPenrose600.zip?download=true\" #@param {type:\"string\"}\n",
"\n",
"if model_link.startswith(\"https://www.weights.gg\") or model_link.startswith(\"https://weights.gg\"):\n",
" weights_code = requests.get(\"https://pastebin.com/raw/ytHLr8h0\").text\n",
" exec(weights_code)\n",
"else:\n",
" model_link = model_link\n",
"\n",
"model_link = '\"'+model_link+'\"'\n",
"!curl -L $model_link > model.zip\n",
"\n",
"# Conditionally set the iconFile based on whether icon_link is empty\n",
"if icon_link:\n",
" iconFile = \"icon.png\"\n",
" !curl -L $icon_link > model_dir/$model_slot/icon.png\n",
"else:\n",
" iconFile = \"\"\n",
" print(\"icon_link is empty, so no icon file will be downloaded.\")\n",
"\n",
"!unzip model.zip -d model_dir/$model_slot\n",
"\n",
"!mv model_dir/$model_slot/*/* model_dir/$model_slot/\n",
"!rm -rf model_dir/$model_slot/*/\n",
"#@markdown **Model Voice Convertion Setting**\n",
"Tune = 12 #@param {type:\"slider\",min:-50,max:50,step:1}\n",
"Index = 0 #@param {type:\"slider\",min:0,max:1,step:0.1}\n",
"\n",
"param_link = \"\"\n",
"if param_link == \"\":\n",
" paramset = requests.get(\"https://pastebin.com/raw/SAKwUCt1\").text\n",
" exec(paramset)\n",
"\n",
"clear_output()\n",
"print(\"\\033[93mModel with the name of \"+model_name+\" has been Imported to slot \"+model_slot)"
],
"metadata": {
"id": "_ZtbKUVUgN3G",
"cellView": "form"
},
"execution_count": null,
"outputs": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"id": "lLWQuUd7WW9U",
"cellView": "form"
},
"outputs": [],
"source": [
"\n",
"#=======================Updated=========================\n",
"\n",
"# @title Start Server **using ngrok**\n",
"# @markdown This cell will start the server, the first time that you run it will download the models, so it can take a while (~1-2 minutes)\n",
"\n",
"# @markdown ---\n",
"# @markdown You'll need a ngrok account, but <font color=green>**it's free**</font> and easy to create!\n",
"# @markdown ---\n",
"# @markdown **1** - Create a <font color=green>**free**</font> account at [ngrok](https://dashboard.ngrok.com/signup) or **login with Google/Github account**\\\n",
"# @markdown **2** - If you didn't logged in with Google/Github, you will need to **verify your e-mail**!\\\n",
"# @markdown **3** - Click [this link](https://dashboard.ngrok.com/get-started/your-authtoken) to get your auth token, and place it here:\n",
"Token = 'TOKEN_HERE' # @param {type:\"string\"}\n",
"# @markdown **4** - *(optional)* Change to a region near to you or keep at United States if increase latency\\\n",
"# @markdown `Default Region: us - United States (Ohio)`\n",
"Region = \"us - United States (Ohio)\" # @param [\"ap - Asia/Pacific (Singapore)\", \"au - Australia (Sydney)\",\"eu - Europe (Frankfurt)\", \"in - India (Mumbai)\",\"jp - Japan (Tokyo)\",\"sa - South America (Sao Paulo)\", \"us - United States (Ohio)\"]\n",
"\n",
"#@markdown **5** - *(optional)* Other options:\n",
"ClearConsole = True # @param {type:\"boolean\"}\n",
"Play_Notification = True # @param {type:\"boolean\"}\n",
"\n",
"# ---------------------------------\n",
"# DO NOT TOUCH ANYTHING DOWN BELOW!\n",
"# ---------------------------------\n",
"\n",
"%cd $pathloc/server/\n",
"\n",
"from pyngrok import conf, ngrok\n",
"MyConfig = conf.PyngrokConfig()\n",
"MyConfig.auth_token = Token\n",
"MyConfig.region = Region[0:2]\n",
"#conf.get_default().authtoken = Token\n",
"#conf.get_default().region = Region\n",
"conf.set_default(MyConfig);\n",
"\n",
"import subprocess, threading, time, socket, urllib.request\n",
"PORT = 8000\n",
"\n",
"from pyngrok import ngrok\n",
"ngrokConnection = ngrok.connect(PORT)\n",
"public_url = ngrokConnection.public_url\n",
"\n",
"from IPython.display import clear_output\n",
"from IPython.display import Audio, display\n",
"def play_notification_sound():\n",
" display(Audio(url='https://raw.githubusercontent.com/hinabl/rmvpe-ai-kaggle/main/custom/audios/notif.mp3', autoplay=True))\n",
"\n",
"\n",
"def wait_for_server():\n",
" while True:\n",
" time.sleep(0.5)\n",
" sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\n",
" result = sock.connect_ex(('127.0.0.1', PORT))\n",
" if result == 0:\n",
" break\n",
" sock.close()\n",
" if ClearConsole:\n",
" clear_output()\n",
" print(\"--------- SERVER READY! ---------\")\n",
" print(\"Your server is available at:\")\n",
" print(public_url)\n",
" print(\"---------------------------------\")\n",
" if Play_Notification==True:\n",
" play_notification_sound()\n",
"\n",
"threading.Thread(target=wait_for_server, daemon=True).start()\n",
"\n",
"mainpy=codecs.decode('ZZIPFreireFVB.cl','rot_13')\n",
"\n",
"!python3 $mainpy \\\n",
" -p {PORT} \\\n",
" --https False \\\n",
" --content_vec_500 pretrain/checkpoint_best_legacy_500.pt \\\n",
" --content_vec_500_onnx pretrain/content_vec_500.onnx \\\n",
" --content_vec_500_onnx_on true \\\n",
" --hubert_base pretrain/hubert_base.pt \\\n",
" --hubert_base_jp pretrain/rinna_hubert_base_jp.pt \\\n",
" --hubert_soft pretrain/hubert/hubert-soft-0d54a1f4.pt \\\n",
" --nsf_hifigan pretrain/nsf_hifigan/model \\\n",
" --crepe_onnx_full pretrain/crepe_onnx_full.onnx \\\n",
" --crepe_onnx_tiny pretrain/crepe_onnx_tiny.onnx \\\n",
" --rmvpe pretrain/rmvpe.pt \\\n",
" --model_dir model_dir \\\n",
" --samples samples.json\n",
"\n",
"ngrok.disconnect(ngrokConnection.public_url)"
]
},
{
"cell_type": "markdown",
"source": [
"![](https://i.pinimg.com/474x/de/72/9e/de729ecfa41b69901c42c82fff752414.jpg)\n",
"![](https://i.pinimg.com/474x/de/72/9e/de729ecfa41b69901c42c82fff752414.jpg)"
],
"metadata": {
"id": "2Uu1sTSwTc7q"
}
}
],
"metadata": {
"colab": {
"provenance": [],
"private_outputs": true,
"gpuType": "T4",
"include_colab_link": true
},
"kernelspec": {
"display_name": "Python 3",
"name": "python3"
},
"language_info": {
"name": "python"
},
"accelerator": "GPU"
},
"nbformat": 4,
"nbformat_minor": 0
}

99
Kaggle_RealtimeVoiceChanger.ipynb
View File

@ -1,99 +0,0 @@
{
"metadata":{
"kernelspec":{
"language":"python",
"display_name":"Python 3",
"name":"python3"
},
"language_info":{
"name":"python",
"version":"3.10.12",
"mimetype":"text/x-python",
"codemirror_mode":{
"name":"ipython",
"version":3
},
"pygments_lexer":"ipython3",
"nbconvert_exporter":"python",
"file_extension":".py"
}
},
"nbformat_minor":4,
"nbformat":4,
"cells":[
{
"cell_type": "markdown",
"metadata": {
"id": "view-in-github",
"colab_type": "text"
},
"source": [
"<a href=\"https://www.kaggle.com/code/rafacasari/wokada-voice-changer\" target=\"_parent\"><img src=\"https://img.shields.io/badge/Open%20In%20Kaggle-035a7d?style=for-the-badge&logo=kaggle&logoColor=white\" alt=\"Open In Colab\"/></a>"
]
},
{
"cell_type":"markdown",
"source":"### [w-okada's Voice Changer](https://github.com/w-okada/voice-changer) | **Kaggle**\n\n---\n\n## **⬇ VERY IMPORTANT ⬇**\n\nYou can use the following settings for better results:\n\nIf you're using a index: `f0: RMVPE_ONNX | Chunk: 112 or higher | Extra: 8192`<br>\nIf you're not using a index: `f0: RMVPE_ONNX | Chunk: 96 or higher | Extra: 16384`<br>\n**Don't forget to select a GPU in the GPU field, <b>NEVER</b> use CPU!\n> Seems that PTH models performance better than ONNX for now, you can still try ONNX models and see if it satisfies you\n\n\n*You can always [click here](https://github.com/YunaOneeChan/Voice-Changer-Settings) to check if these settings are up-to-date*\n\n---\n**Credits**<br>\nRealtime Voice Changer by [w-okada](https://github.com/w-okada)<br>\nNotebook files updated by [rafacasari](https://github.com/Rafacasari)<br>\nRecommended settings by [YunaOneeChan](https://github.com/YunaOneeChan)\n\n**Need help?** [AI Hub Discord](https://discord.gg/aihub) » ***#help-realtime-vc***\n\n---",
"metadata":{
"id":"Lbbmx_Vjl0zo"
}
},
{
"cell_type":"markdown",
"source":"# Kaggle Tutorial\nRunning this notebook can be a bit complicated.\\\nAfter created your Kaggle account, you'll need to **verify your phone number** to be able to use Internet Connection and GPUs.\\\nFollow the instructions on the image below.\n\n## <font color=blue>*You can use <b>GPU P100</b> instead of GPU T4, some people are telling that <b>P100 is better</b>.*</font>\n![instructions.png](https://i.imgur.com/0NutkD8.png)",
"metadata":{
}
},
{
"cell_type":"markdown",
"source":"# Clone repository and install dependencies\nThis first step will download the latest version of Voice Changer and install the dependencies. **It will take some time to complete.**",
"metadata":{
}
},
{
"cell_type":"code",
"source":"# This will make that we're on the right folder before installing\n%cd /kaggle/working/\n\n!pip install colorama --quiet\nfrom colorama import Fore, Style\nimport os\n\nprint(f\"{Fore.CYAN}> Cloning the repository...{Style.RESET_ALL}\")\n!git clone https://github.com/w-okada/voice-changer.git --quiet\nprint(f\"{Fore.GREEN}> Successfully cloned the repository!{Style.RESET_ALL}\")\n%cd voice-changer/server/\n\nprint(f\"{Fore.CYAN}> Installing libportaudio2...{Style.RESET_ALL}\")\n!apt-get -y install libportaudio2 -qq\n\nprint(f\"{Fore.CYAN}> Installing pre-dependencies...{Style.RESET_ALL}\")\n# Install dependencies that are missing from requirements.txt and pyngrok\n!pip install faiss-gpu fairseq pyngrok --quiet \n!pip install pyworld --no-build-isolation --quiet\nprint(f\"{Fore.CYAN}> Installing dependencies from requirements.txt...{Style.RESET_ALL}\")\n!pip install -r requirements.txt --quiet\n\n# Download the default settings ^-^\nif not os.path.exists(\"/kaggle/working/voice-changer/server/stored_setting.json\"):\n !wget -q https://gist.githubusercontent.com/Rafacasari/d820d945497a01112e1a9ba331cbad4f/raw/8e0a426c22688b05dd9c541648bceab27e422dd6/kaggle_setting.json -O /kaggle/working/voice-changer/server/stored_setting.json\nprint(f\"{Fore.GREEN}> Successfully installed all packages!{Style.RESET_ALL}\")\n\nprint(f\"{Fore.GREEN}> You can safely ignore the dependency conflict errors, it's a error from Kaggle and don't interfer on Voice Changer!{Style.RESET_ALL}\")",
"metadata":{
"id":"86wTFmqsNMnD",
"cellView":"form",
"_kg_hide-output":false,
"execution":{
"iopub.status.busy":"2023-09-14T04:01:17.308284Z",
"iopub.execute_input":"2023-09-14T04:01:17.308682Z",
"iopub.status.idle":"2023-09-14T04:08:08.475375Z",
"shell.execute_reply.started":"2023-09-14T04:01:17.308652Z",
"shell.execute_reply":"2023-09-14T04:08:08.473827Z"
},
"trusted":true
},
"execution_count":0,
"outputs":[
]
},
{
"cell_type":"markdown",
"source":"# Start Server **using ngrok**\nThis cell will start the server, the first time that you run it will download the models, so it can take a while (~1-2 minutes)\n\n---\nYou'll need a ngrok account, but <font color=green>**it's free**</font> and easy to create!\n---\n**1** - Create a **free** account at [ngrok](https://dashboard.ngrok.com/signup)\\\n**2** - If you didn't logged in with Google or Github, you will need to **verify your e-mail**!\\\n**3** - Click [this link](https://dashboard.ngrok.com/get-started/your-authtoken) to get your auth token, and replace **YOUR_TOKEN_HERE** with your token.\\\n**4** - *(optional)* Change to a region near to you",
"metadata":{
}
},
{
"cell_type":"code",
"source":"# ---------------------------------\n# SETTINGS\n# ---------------------------------\n\nToken = '2Tn2hbfLtw2ii6DHEJy7SsM1BjI_21G14MXSwz7qZSDL2Dv3B'\nClearConsole = True # Clear console after initialization. Set to False if you are having some error, then you will be able to report it.\nRegion = \"sa\" # Read the instructions below\n\n# You can change the region for a better latency, use only the abbreviation\n# Choose between this options: \n# us -> United States (Ohio)\n# ap -> Asia/Pacific (Singapore)\n# au -> Australia (Sydney)\n# eu -> Europe (Frankfurt)\n# in -> India (Mumbai)\n# jp -> Japan (Tokyo)\n# sa -> South America (Sao Paulo)\n\n# ---------------------------------\n# DO NOT TOUCH ANYTHING DOWN BELOW!\n# ---------------------------------\n\n%cd /kaggle/working/voice-changer/server\n \nfrom pyngrok import conf, ngrok\nMyConfig = conf.PyngrokConfig()\nMyConfig.auth_token = Token\nMyConfig.region = Region\n#conf.get_default().authtoken = Token\n#conf.get_default().region = Region\nconf.set_default(MyConfig);\n\nimport subprocess, threading, time, socket, urllib.request\nPORT = 8000\n\nfrom pyngrok import ngrok\nngrokConnection = ngrok.connect(PORT)\npublic_url = ngrokConnection.public_url\n\nfrom IPython.display import clear_output\n\ndef wait_for_server():\n while True:\n time.sleep(0.5)\n sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\n result = sock.connect_ex(('127.0.0.1', PORT))\n if result == 0:\n break\n sock.close()\n if ClearConsole:\n clear_output()\n print(\"--------- SERVER READY! ---------\")\n print(\"Your server is available at:\")\n print(public_url)\n print(\"---------------------------------\")\n\nthreading.Thread(target=wait_for_server, daemon=True).start()\n\n!python3 MMVCServerSIO.py \\\n -p {PORT} \\\n --https False \\\n --content_vec_500 pretrain/checkpoint_best_legacy_500.pt \\\n --content_vec_500_onnx pretrain/content_vec_500.onnx \\\n --content_vec_500_onnx_on true \\\n --hubert_base pretrain/hubert_base.pt \\\n --hubert_base_jp pretrain/rinna_hubert_base_jp.pt \\\n --hubert_soft pretrain/hubert/hubert-soft-0d54a1f4.pt \\\n --nsf_hifigan pretrain/nsf_hifigan/model \\\n --crepe_onnx_full pretrain/crepe_onnx_full.onnx \\\n --crepe_onnx_tiny pretrain/crepe_onnx_tiny.onnx \\\n --rmvpe pretrain/rmvpe.pt \\\n --model_dir model_dir \\\n --samples samples.json\n\nngrok.disconnect(ngrokConnection.public_url)",
"metadata":{
"id":"lLWQuUd7WW9U",
"cellView":"form",
"_kg_hide-input":false,
"scrolled":true,
"trusted":true
},
"execution_count":null,
"outputs":[
]
}
]
}

122
README_dev_en.md
View File

@ -1,122 +0,0 @@
## For Developper
[Japanese](/README_dev_ja.md)
## Prerequisit
- Linux(ubuntu, debian) or WSL2, (not tested for other linux distributions and Mac)
- Anaconda
## Preparation
1. Create anaconda virtual environment
```
$ conda create -n vcclient-dev python=3.10
$ conda activate vcclient-dev
```
2. clone repository
```
$ git clone https://github.com/w-okada/voice-changer.git
```
## For Server Developer
1. Install requirements
```
$ cd voice-changer/server
$ pip install -r requirements.txt
```
2. Run server
Run server with the below command. You can replace the path to each weight.
```
$ python3 MMVCServerSIO.py -p 18888 --https true \
--content_vec_500 pretrain/checkpoint_best_legacy_500.pt \
--content_vec_500_onnx pretrain/content_vec_500.onnx \
--content_vec_500_onnx_on true \
--hubert_base pretrain/hubert_base.pt \
--hubert_base_jp pretrain/rinna_hubert_base_jp.pt \
--hubert_soft pretrain/hubert/hubert-soft-0d54a1f4.pt \
--nsf_hifigan pretrain/nsf_hifigan/model \
--crepe_onnx_full pretrain/crepe_onnx_full.onnx \
--crepe_onnx_tiny pretrain/crepe_onnx_tiny.onnx \
--rmvpe pretrain/rmvpe.pt \
--model_dir model_dir \
--samples samples.json
```
Access with Browser (currently only chrome is supported), then you can see gui.
2-1. Trouble shoot
(1) OSError: PortAudio library not found
If you get the message below, you shold install additional library.
```
OSError: PortAudio library not found
```
You can install the library this command.
```
$ sudo apt-get install libportaudio2
$ sudo apt-get install libasound-dev
```
(2) It's not starting up! Damn software!
The client will not start automatically. Please launch your browser and access the URL displayed on the console. And watch your words.
(3) Could not load library libcudnn_cnn_infer.so.8
When using WSL, you might encounter a message saying `Could not load library libcudnn_cnn_infer.so.8. Error: libcuda.so: cannot open shared object file: No such file or directory`. This often happens because the path hasn't been properly set. Please set the path as shown below. It might be handy to add this to your launch script, such as .bashrc.
```
export LD_LIBRARY_PATH=/usr/lib/wsl/lib:$LD_LIBRARY_PATH
```
- reference
- https://qiita.com/cacaoMath/items/811146342946cdde5b83
- https://github.com/microsoft/WSL/issues/8587
3. Enjoy developing.
### Appendix
1. Win + Anaconda (not supported)
use conda to install pytorch
```
conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch -c nvidia
```
Also run these command.
```
pip install chardet
pip install numpy==1.24.0
```
## For Client Developer
1. Import modules and initial build
```
cd client
cd lib
npm install
npm run build:dev
cd ../demo
npm install
npm run build:dev
```
2. Enjoy developing.

122
README_dev_ja.md
View File

@ -1,122 +0,0 @@
## 開発者向け
[English](/README_dev_en.md)
## 前提
- Linux(ubuntu, debian) or WSL2, (not tested for other linux distributions and Mac)
- Anaconda
## 準備
1. Anaconda の仮想環境を作成する
```
$ conda create -n vcclient-dev python=3.10
$ conda activate vcclient-dev
```
2. リポジトリをクローンする
```
$ git clone https://github.com/w-okada/voice-changer.git
```
## サーバ開発者向け
1. モジュールをインストールする
```
$ cd voice-changer/server
$ pip install -r requirements.txt
```
2. サーバを起動する
次のコマンドで起動します。各種重みについてのパスは環境に合わせて変えてください。
```
$ python3 MMVCServerSIO.py -p 18888 --https true \
--content_vec_500 pretrain/checkpoint_best_legacy_500.pt \
--content_vec_500_onnx pretrain/content_vec_500.onnx \
--content_vec_500_onnx_on true \
--hubert_base pretrain/hubert_base.pt \
--hubert_base_jp pretrain/rinna_hubert_base_jp.pt \
--hubert_soft pretrain/hubert/hubert-soft-0d54a1f4.pt \
--nsf_hifigan pretrain/nsf_hifigan/model \
--crepe_onnx_full pretrain/crepe_onnx_full.onnx \
--crepe_onnx_tiny pretrain/crepe_onnx_tiny.onnx \
--rmvpe pretrain/rmvpe.pt \
--model_dir model_dir \
--samples samples.json
```
ブラウザ(Chrome のみサポート)でアクセスすると画面が表示されます。
2-1. トラブルシュート
(1) OSError: PortAudio library not found
次のようなメッセージが表示される場合、追加でライブラリを追加する必要があります。
```
OSError: PortAudio library not found
```
ubuntu(wsl2)の場合下記のコマンドでインストールできます。
```
$ sudo apt-get install libportaudio2
$ sudo apt-get install libasound-dev
```
(2) 起動しないんだけど！？
自動でクライアントは起動しません。ブラウザを立ち上げてコンソールに表示された URL にアクセスしてください。
(3) Could not load library libcudnn_cnn_infer.so.8
WSL を使っていると`Could not load library libcudnn_cnn_infer.so.8. Error: libcuda.so: cannot open shared object file: No such file or directory`と表示される場合があります。
パスが通っていないことが原因のことが多いです。下記のようにパスを通して実行してください。
.bashrc など起動スクリプトに追加しておくと便利だと思います。
```
export LD_LIBRARY_PATH=/usr/lib/wsl/lib:$LD_LIBRARY_PATH
```
- 参考
- https://qiita.com/cacaoMath/items/811146342946cdde5b83
- https://github.com/microsoft/WSL/issues/8587
3. 開発しましょう
### Appendix
1. Win + Anaconda のとき (not supported)
pytorch を conda で入れないと gpu を認識しないかもしれない。
```
conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch -c nvidia
```
また、追加で下記も必要のようだ。
```
pip install chardet
pip install numpy==1.24.0
```
## クライアント開発者向け
1. モジュールをインストールして、一度ビルドします
```
cd client
cd lib
npm install
npm run build:dev
cd ../demo
npm install
npm run build:dev
```
2. 開発しましょう

122
README_dev_ko.md
View File

@ -1,122 +0,0 @@
## 개발자용
[English](/README_dev_en.md) [Korean](/README_dev_ko.md)
## 전제
- Linux(ubuntu, debian) or WSL2, (다른 리눅스 배포판과 Mac에서는 테스트하지 않았습니다)
- Anaconda
## 준비
1. Anaconda 가상 환경을 작성한다
```
$ conda create -n vcclient-dev python=3.10
$ conda activate vcclient-dev
```
2. 리포지토리를 클론한다
```
$ git clone https://github.com/w-okada/voice-changer.git
```
## 서버 개발자용
1. 모듈을 설치한다
```
$ cd voice-changer/server
$ pip install -r requirements.txt
```
2. 서버를 구동한다
다음 명령어로 구동합니다. 여러 가중치에 대한 경로는 환경에 맞게 변경하세요.
```
$ python3 MMVCServerSIO.py -p 18888 --https true \
--content_vec_500 pretrain/checkpoint_best_legacy_500.pt \
--content_vec_500_onnx pretrain/content_vec_500.onnx \
--content_vec_500_onnx_on true \
--hubert_base pretrain/hubert_base.pt \
--hubert_base_jp pretrain/rinna_hubert_base_jp.pt \
--hubert_soft pretrain/hubert/hubert-soft-0d54a1f4.pt \
--nsf_hifigan pretrain/nsf_hifigan/model \
--crepe_onnx_full pretrain/crepe_onnx_full.onnx \
--crepe_onnx_tiny pretrain/crepe_onnx_tiny.onnx \
--rmvpe pretrain/rmvpe.pt \
--model_dir model_dir \
--samples samples.json
```
브라우저(Chrome에서만 지원)에서 접속하면 화면이 나옵니다.
2-1. 문제 해결법
(1) OSError: PortAudio library not found
다음과 같은 메시지가 나올 경우에는 추가 라이브러리를 설치해야 합니다.
```
OSError: PortAudio library not found
```
ubuntu(wsl2)인 경우에는 아래 명령어로 설치할 수 있습니다.
```
$ sudo apt-get install libportaudio2
$ sudo apt-get install libasound-dev
```
(2) 서버 구동이 안 되는데요?!
클라이언트는 자동으로 구동되지 않습니다. 브라우저를 실행하고 콘솔에 표시된 URL로 접속하세요.
(3) Could not load library libcudnn_cnn_infer.so.8
WSL를 사용 중이라면 `Could not load library libcudnn_cnn_infer.so.8. Error: libcuda.so: cannot open shared object file: No such file or directory`라는 메시지가 나오는 경우가 있습니다.
잘못된 경로가 원인인 경우가 많습니다. 아래와 같이 경로를 바꾸고 실행해 보세요.
.bashrc 등 구동 스크립트에 추가해 두면 편리합니다.
```
export LD_LIBRARY_PATH=/usr/lib/wsl/lib:$LD_LIBRARY_PATH
```
- 참고
- https://qiita.com/cacaoMath/items/811146342946cdde5b83
- https://github.com/microsoft/WSL/issues/8587
3. 개발하세요
### Appendix
1. Win + Anaconda일 때 (not supported)
pytorch를 conda가 없으면 gpu를 인식하지 않을 수 있습니다.
```
conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch -c nvidia
```
또한 추가로 아래 내용도 필요합니다.
```
pip install chardet
pip install numpy==1.24.0
```
## 클라이언트 개발자용
1. 모듈을 설치하고 한번 빌드합니다
```
cd client
cd lib
npm install
npm run build:dev
cd ../demo
npm install
npm run build:dev
```
2. 개발하세요

192
README_en.md
View File

@ -1,192 +0,0 @@
## VC Client
[Japanese](/README_ja.md) [Korean](/README_ko.md)
## What's New!
- v.1.5.3.18a
- Bugfix: FCPE
- v.1.5.3.18 (removed.)
- New Feature: FCPE
- Easy-VC (experimental)
- v.1.5.3.17b
- bugfix:
- clear setting
- improve
- file sanitizer
- chage:
- default input chunk size: 192.
- decided by this chart.(https://rentry.co/VoiceChangerGuide#gpu-chart-for-known-working-chunkextra)
- v.1.5.3.17a
- Bug Fixes:
- Server mode error
- RVC Model merger
- Misc
- Add RVC Sample Chihaya-Jinja (https://chihaya369.booth.pm/items/4701666)
- v.1.5.3.17
- New Features:
- Added similarity graph for Beatrice speaker selection
- Bug Fixes:
- Fixed crossfade issue with Beatrice speaker
- v.1.5.3.16a
- Bug fix:
- Lazy load Beatrice.
- v.1.5.3.16 (Only for Windows, CPU dependent)
- New Feature:
- Beatrice is supported(experimental)
- v.1.5.3.15
- Improve:
- new rmvpe checkpoint for rvc (torch, onnx)
- Mac: upgrade torch version 2.1.0
# What is VC Client
1. This is a client software for performing real-time voice conversion using various Voice Conversion (VC) AI. The supported AI for voice conversion are as follows.
- [MMVC](https://github.com/isletennos/MMVC_Trainer)
- [so-vits-svc](https://github.com/svc-develop-team/so-vits-svc)
- [RVC(Retrieval-based-Voice-Conversion)](https://github.com/liujing04/Retrieval-based-Voice-Conversion-WebUI)
- [DDSP-SVC](https://github.com/yxlllc/DDSP-SVC)
- [Beatrice JVS Corpus Edition](https://prj-beatrice.com/) * experimental, (***NOT MIT Licnsence*** see [readme](https://github.com/w-okada/voice-changer/blob/master/server/voice_changer/Beatrice/)) * Only for Windows, CPU dependent
1. Distribute the load by running Voice Changer on a different PC
The real-time voice changer of this application works on a server-client configuration. By running the MMVC server on a separate PC, you can run it while minimizing the impact on other resource-intensive processes such as gaming commentary.
![image](https://user-images.githubusercontent.com/48346627/206640768-53f6052d-0a96-403b-a06c-6714a0b7471d.png)
3. Cross-platform compatibility
Supports Windows, Mac (including Apple Silicon M1), Linux, and Google Colaboratory.
# usage
This is an app for performing voice changes with MMVC and so-vits-svc.
It can be used in two main ways, in order of difficulty:
- Using a pre-built binary
- Setting up an environment with Docker or Anaconda and using it
## (1) Usage with pre-built binaries
- You can download and run executable binaries.
- Please see [here](tutorials/tutorial_rvc_en_latest.md) for the tutorial. ([trouble shoot](https://github.com/w-okada/voice-changer/blob/master/tutorials/trouble_shoot_communication_ja.md))
- It's now easy to try it out on [Google Colaboratory](https://github.com/w-okada/voice-changer/blob/master/Realtime_Voice_Changer_on_Colab.ipynb) (requires a ngrok account). You can launch it from the 'Open in Colab' button in the top left corner.
<img src="https://github.com/w-okada/voice-changer/assets/48346627/3f092e2d-6834-42f6-bbfd-7d389111604e" width="400" height="150">
- We offer Windows and Mac versions.
- If you are using a Windows and Nvidia GPU, please download ONNX (cpu, cuda), PyTorch (cpu, cuda).
- If you are using a Windows and AMD/Intel GPU, please download ONNX (cpu, DirectML) and PyTorch (cpu, cuda). AMD/Intel GPUs are only enabled for ONNX models.
- In either case, for GPU support, PyTorch and Onnxruntime are only enabled if supported.
- If you are not using a GPU on Windows, please download ONNX (cpu, cuda) and PyTorch (cpu, cuda).
- For Windows user, after unzipping the downloaded zip file, please run the `start_http.bat` file corresponding to your VC.
- For Mac version, after unzipping the downloaded file, double-click the `startHttp.command` file corresponding to your VC. If a message indicating that the developer cannot be verified is displayed, please press the control key and click to run it again (or right-click to run it).
- If you are connecting remotely, please use the `.command` file (Mac) or `.bat` file (Windows) with https instead of http.
- The encoder of DDPS-SVC only supports hubert-soft.
- Download (When you cannot download from google drive, try [hugging_face](https://huggingface.co/wok000/vcclient000/tree/main))
| Version | OS | Framework | link | support VC | size |
| ----------- | --- | ------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------ |
| v.1.5.3.18a | mac | ONNX(cpu), PyTorch(cpu,mps) | N/A | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3125MB |
| v.1.5.3.17b | mac | ONNX(cpu), PyTorch(cpu,mps) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3125MB |
| v.1.5.3.16a | mac | ONNX(cpu), PyTorch(cpu,mps) | N/A | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3125MB |
| v.1.5.3.15 | mac | ONNX(cpu), PyTorch(cpu,mps) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC | 3125MB |
(\*1) You can also download from [hugging_face](https://huggingface.co/wok000/vcclient000/tree/main)
(\*2) The developer does not have an AMD graphics card, so it has not been tested. This package only includes onnxruntime-directml.
(\*3) If unpacking or starting is slow, there is a possibility that virus checking is running on your antivirus software. Please try running it with the file or folder excluded from the target. (At your own risk)
## (2) Usage after setting up the environment such as Docker or Anaconda
Clone this repository and use it. Setting up WSL2 is essential for Windows. Additionally, setting up virtual environments such as Docker or Anaconda on WSL2 is also required. On Mac, setting up Python virtual environments such as Anaconda is necessary. Although preparation is required, this method works the fastest in many environments. **<font color="red"> Even without a GPU, it may work well enough with a reasonably new CPU </font>(refer to the section on real-time performance below)**.
[Explanation video on installing WSL2 and Docker](https://youtu.be/POo_Cg0eFMU)
[Explanation video on installing WSL2 and Anaconda](https://youtu.be/fba9Zhsukqw)
To run docker, see [start docker](docker_vcclient/README_en.md).
To run on Anaconda venv, see [server developer's guide](README_dev_en.md)
To run on Linux using an AMD GPU, see [setup guide linux](tutorials/tutorial_anaconda_amd_rocm.md)
# Real-time performance
Conversion is almost instantaneous when using GPU.
https://twitter.com/DannadoriYellow/status/1613483372579545088?s=20&t=7CLD79h1F3dfKiTb7M8RUQ
Even with CPU, recent ones can perform conversions at a reasonable speed.
https://twitter.com/DannadoriYellow/status/1613553862773997569?s=20&t=7CLD79h1F3dfKiTb7M8RUQ
With an old CPU (i7-4770), it takes about 1000 msec for conversion.
# Software Signing
This software is not signed by the developer. A warning message will appear, but you can run the software by clicking the icon while holding down the control key. This is due to Apple's security policy. Running the software is at your own risk.
![image](https://user-images.githubusercontent.com/48346627/212567711-c4a8d599-e24c-4fa3-8145-a5df7211f023.png)
https://user-images.githubusercontent.com/48346627/212569645-e30b7f4e-079d-4504-8cf8-7816c5f40b00.mp4
# Acknowledgments
- [Tachizunda-mon materials](https://seiga.nicovideo.jp/seiga/im10792934)
- [Irasutoya](https://www.irasutoya.com/)
- [Tsukuyomi-chan](https://tyc.rei-yumesaki.net)
> This software uses the voice data of the free material character "Tsukuyomi-chan," which is provided for free by CV. Yumesaki Rei.
>
> - Tsukuyomi-chan Corpus (CV. Yumesaki Rei)
>
> https://tyc.rei-yumesaki.net/material/corpus/
>
> Copyright. Rei Yumesaki
- [Amitaro's Onsozai kobo](https://amitaro.net/)
- [Replica doll](https://kikyohiroto1227.wixsite.com/kikoto-utau)
# Terms of Use
In accordance with the Tsukuyomi-chan Corpus Terms of Use for the Tsukuyomi-chan Real-time Voice Changer, the use of the converted voice for the following purposes is prohibited.
- Criticizing or attacking individuals (the definition of "criticizing or attacking" is based on the Tsukuyomi-chan character license).
- Advocating for or opposing specific political positions, religions, or ideologies.
- Publicly displaying strongly stimulating expressions without proper zoning.
- Publicly disclosing secondary use (use as materials) for others.
(Distributing or selling as a work for viewing is not a problem.)
Regarding the Real-time Voice Changer Amitaro, we prohibit the following uses in accordance with the terms of use of the Amitaro's koe-sozai kobo.[detail](https://amitaro.net/voice/faq/#index_id6)
Regarding the Real-time Voice Changer Kikoto Mahiro, we prohibit the following uses in accordance with the terms of use of Replica doll.[detail](https://kikyohiroto1227.wixsite.com/kikoto-utau/ter%EF%BD%8Ds-of-service)
# Disclaimer
We are not liable for any direct, indirect, consequential, incidental, or special damages arising out of or in any way connected with the use or inability to use this software.

229
README_ko.md
View File

@ -1,229 +0,0 @@
## VC Client
[English](/README_en.md) [Korean](/README_ko.md)
## 새로운 기능!
- v.1.5.3.18a
- Bugfix: FCPE
- v.1.5.3.18 (removed.)
- New Feature: FCPE
- Easy-VC (experimental)
- v.1.5.3.17b
- bugfix:
- clear setting
- improve
- file sanitizer
- chage:
- default input chunk size: 192.
- decided by this chart.(https://rentry.co/VoiceChangerGuide#gpu-chart-for-known-working-chunkextra)
- v.1.5.3.17a
- Bug Fixes:
- Server mode error
- RVC Model merger
- Misc
- Add RVC Sample Chihaya-Jinja (https://chihaya369.booth.pm/items/4701666)
- v.1.5.3.17
- New Features:
- Added similarity graph for Beatrice speaker selection
- Bug Fixes:
- Fixed crossfade issue with Beatrice speaker
- v.1.5.3.16a
- Bug fix:
- Lazy load Beatrice.
- v.1.5.3.16 (Only for Windows, CPU dependent)
- New Feature:
- Beatrice is supported(experimental)
- v.1.5.3.15
- Improve:
- new rmvpe checkpoint for rvc (torch, onnx)
- Mac: upgrade torch version 2.1.0
# VC Client란
1. 각종 음성 변환 AI(VC, Voice Conversion)를 활용해 실시간 음성 변환을 하기 위한 클라이언트 소프트웨어입니다. 지원하는 음성 변환 AI는 다음과 같습니다.
- 지원하는 음성 변환 AI (지원 VC)
- [MMVC](https://github.com/isletennos/MMVC_Trainer)
- [so-vits-svc](https://github.com/svc-develop-team/so-vits-svc)
- [RVC(Retrieval-based-Voice-Conversion)](https://github.com/liujing04/Retrieval-based-Voice-Conversion-WebUI)
- [DDSP-SVC](https://github.com/yxlllc/DDSP-SVC)
- [Beatrice JVS Corpus Edition](https://prj-beatrice.com/) * experimental, (***NOT MIT Licnsence*** see [readme](https://github.com/w-okada/voice-changer/blob/master/server/voice_changer/Beatrice/)) * Only for Windows, CPU dependent
-
1. 이 소프트웨어는 네트워크를 통한 사용도 가능하며, 게임 등 부하가 큰 애플리케이션과 동시에 사용할 경우 음성 변화 처리의 부하를 외부로 돌릴 수도 있습니다.
![image](https://user-images.githubusercontent.com/48346627/206640768-53f6052d-0a96-403b-a06c-6714a0b7471d.png)
3. 여러 플랫폼을 지원합니다.
- Windows, Mac(M1), Linux, Google Colab (MMVC만 지원)
# 사용 방법
크게 두 가지 방법으로 사용할 수 있습니다. 난이도 순서는 다음과 같습니다.
- 사전 빌드된 Binary 사용
- Docker, Anaconda 등으로 구축된 개발 환경에서 사용
이 소프트웨어나 MMVC에 익숙하지 않은 분들은 위에서부터 차근차근 익숙해지길 추천합니다.
## (1) 사전 빌드된 Binary(파일) 사용
- 실행 형식 바이너리를 다운로드하여 실행할 수 있습니다.
- 튜토리얼은 [이곳](tutorials/tutorial_rvc_ko_latest.md)을 확인하세요。([네트워크 문제 해결법](https://github.com/w-okada/voice-changer/blob/master/tutorials/trouble_shoot_communication_ko.md))
- [Google Colaboratory](https://github.com/w-okada/voice-changer/blob/master/Realtime_Voice_Changer_on_Colab.ipynb) で簡単にお試しいただけるようになりました。左上の Open in Colab のボタンから起動できます。
<img src="https://github.com/w-okada/voice-changer/assets/48346627/3f092e2d-6834-42f6-bbfd-7d389111604e" width="400" height="150">
- Windows 버전과 Mac 버전을 제공하고 있습니다.
- Windows와 NVIDIA GPU를 사용하는 분은 ONNX(cpu, cuda), PyTorch(cpu, cuda)를 다운로드하세요.
- Windows와 AMD/Intel GPU를 사용하는 분은 ONNX(cpu, DirectML), PyTorch(cpu, cuda)를 다운로드하세요 AMD/Intel GPU는 ONNX 모델을 사용할 때만 적용됩니다.
- 그 외 GPU도 PyTorch, Onnxruntime가 지원할 경우에만 적용됩니다.
- Windows에서 GPU를 사용하지 않는 분은 ONNX(cpu, cuda), PyTorch(cpu, cuda)를 다운로드하세요.
- Windows 버전은 다운로드한 zip 파일의 압축을 풀고 `start_http.bat`를 실행하세요.
- Mac 버전은 다운로드한 파일을 풀고 `startHttp.command`를 실행하세요. 확인되지 않은 개발자 메시지가 나오면 다시 control 키를 누르고 클릭해 실행하세요(or 오른쪽 클릭으로 실행하세요).
- 처음 실행할 때는 인터넷으로 여러 데이터를 다운로드합니다. 다운로드할 때 시간이 좀 걸릴 수 있습니다. 다운로드가 완료되면 브라우저가 실행됩니다.
- 원격으로 접속할 때는 http 대신 https `.bat` 파일(win)、`.command` 파일(mac)을 실행하세요.
- DDPS-SVC의 encoder는 hubert-soft만 지원합니다.
- 다운로드는 아래에서 하세요.
| Version | OS | 프레임워크 | 링크 | 지원 VC | 파일 크기 |
| ----------- | --- | ------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | --------- |
| v.1.5.3.18a | mac | ONNX(cpu), PyTorch(cpu,mps) | N/A | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3125MB |
| v.1.5.3.17b | mac | ONNX(cpu), PyTorch(cpu,mps) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3125MB |
| v.1.5.3.16a | mac | ONNX(cpu), PyTorch(cpu,mps) | N/A | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC, Beatrice | 3125MB |
| v.1.5.3.15 | mac | ONNX(cpu), PyTorch(cpu,mps) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 797MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC | 3240MB |
| | win | ONNX(cpu,DirectML), PyTorch(cpu,cuda) | [hugging face](https://huggingface.co/wok000/vcclient000/tree/main) | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC, DDSP-SVC, Diffusion-SVC | 3125MB |
(\*1) Google Drive에서 다운로드가 안 되는 분은 [hugging_face](https://huggingface.co/wok000/vcclient000/tree/main)에서 시도해 보세요
(\*2) 개발자가 AMD 그래픽카드를 갖고 있지 않아서 작동 확인을 할 수 없습니다. onnxruntime-directml를 같이 첨부한 것이 전부입니다.
(\*3) 압축 해제나 실행 속도가 느릴 경우에는 바이러스 검사가 진행 중일 가능성이 있습니다. 파일과 폴더를 검사 대상 제외를 한 후에 시도해 보세요. (이에 개발자는 책임이 없음)
## (2) Docker나 Anaconda 등으로 구축된 개발 환경에서 사용
이 리포지토리를 클론해 사용할 수 있습니다. Windows에서는 WSL2 환경 구축이 필수입니다. 또한, WSL2 상에 Docker나 Anaconda 등의 가상환경 구축이 필요합니다. Mac에서는 Anaconda 등의 Python 가상환경 구축이 필요합니다. 사전 준비가 필요하지만, 많은 환경에서 이 방법이 가장 빠르게 작동합니다. **<font color="red"> GPU가 없어도 나름 최근 출시된 CPU가 있다면 충분히 작동할 가능성이 있습니다</font>(아래 실시간성 항목 참조)**.
[WSL2와 Docker 설치 설명 영상](https://youtu.be/POo_Cg0eFMU)
[WSL2와 Anaconda 설치 설명 영상](https://youtu.be/fba9Zhsukqw)
Docker에서 실행은 [Docker를 사용](docker_vcclient/README_ko.md)을 참고해 서버를 구동하세요.
Anaconda 가상 환경에서 실행은 [서버 개발자용 문서](README_dev_ko.md)를 참고해 서버를 구동하세요.
# 문제 해결법
- [통신편](tutorials/trouble_shoot_communication_ko.md)
# 실시간성(MMVC)
GPU를 사용하면 시간 차가 거의 없이 변환할 수 있습니다.
https://twitter.com/DannadoriYellow/status/1613483372579545088?s=20&t=7CLD79h1F3dfKiTb7M8RUQ
CPU도 최근 제품이라면 어느 정도 빠르게 변환할 수 있습니다.
https://twitter.com/DannadoriYellow/status/1613553862773997569?s=20&t=7CLD79h1F3dfKiTb7M8RUQ
오래된 CPU(i7-4770)면, 1000msec 정도 걸립니다.
# 개발자 서명에 대하여
이 소프트웨어는 개발자 서명이 없습니다. 本ソフトウェアは開発元の署名しておりません。下記のように警告が出ますが、コントロールキーを押しながらアイコンをクリックすると実行できるようになります。これは Apple のセキュリティポリシーによるものです。実行は自己責任となります。
![image](https://user-images.githubusercontent.com/48346627/212567711-c4a8d599-e24c-4fa3-8145-a5df7211f023.png)
(이미지 번역: ctrl을 누른 채로 클릭)
# 감사의 말
- [立ちずんだもん素材](https://seiga.nicovideo.jp/seiga/im10792934)
- [いらすとや](https://www.irasutoya.com/)
- [つくよみちゃん](https://tyc.rei-yumesaki.net/)
```
이 소프트웨어의 음성 합성에는 무료 소재 캐릭터 「つくよみちゃん(츠쿠요미 짱)」이 무료 공개하고 있는 음성 데이터를 사용했습니다.■츠쿠요미 짱 말뭉치(CV.夢前黎)
https://tyc.rei-yumesaki.net/material/corpus/
© Rei Yumesaki
```
- [あみたろの声素材工房](https://amitaro.net/)
- [れぷりかどーる](https://kikyohiroto1227.wixsite.com/kikoto-utau)
# 이용약관
- 실시간 음성 변환기 츠쿠요미 짱은 츠쿠요미 짱 말뭉치 이용약관에 따라 다음과 같은 목적으로 변환 후 음성을 사용하는 것을 금지합니다.
```
■사람을 비판·공격하는 행위. ("비판·공격"의 정의는 츠쿠요미 짱 캐릭터 라이센스에 준합니다)
■특정 정치적 입장·종교·사상에 대한 찬반을 논하는 행위.
■자극적인 표현물을 무분별하게 공개하는 행위.
■타인에게 2차 창작(소재로서의 활용)을 허가하는 형태로 공개하는 행위.
※감상용 작품으로서 배포·판매하는 건 문제없습니다.
```
- 실시간 음성 변환기 아미타로는 あみたろの声素材工房(아미타로의 음성 소재 공방)의 다음 이용약관에 따릅니다. 자세한 내용은 [이곳](https://amitaro.net/voice/faq/#index_id6)에 있습니다.
```
아미타로의 음성 소재나 말뭉치 음성으로 음성 모델을 만들거나, 음성 변환기나 말투 변환기 등을 사용해 본인 목소리를 아미타로의 목소리로 변환해 사용하는 것도 괜찮습니다.
단, 그 경우에는 반드시 아미타로(혹은 코하루네 아미)의 음성으로 변환한 것을 명시하고, 아미타로(및 코하루네 아미)가 말하는 것이 아님을 누구나 알 수 있도록 하십시오.
또한 아미타로의 음성으로 말하는 내용은 음성 소재 이용약관의 범위 내에서만 사용해야 하며, 민감한 발언은 삼가십시오.
```
- 실시간 음성 변환기 키코토 마히로는 れぷりかどーる(레플리카 돌)의 이용약관에 따릅니다. 자세한 내용은 [이곳](https://kikyohiroto1227.wixsite.com/kikoto-utau/ter%EF%BD%8Ds-of-service)에 있습니다.
# 면책 사항
이 소프트웨어의 사용 또는 사용 불능으로 인해 발생한 직접 손해·간접 손해·파생적 손해·결과적 손해 또는 특별 손해에 대해 모든 책임을 지지 않습니다.
# (1) 레코더(트레이닝용 음성 녹음 앱)
MMVC 트레이닝용 음성을 간단하게 녹음할 수 있는 앱입니다.
Github Pages에서 실행할 수 있어서 브라우저만 있으면 다양한 플랫폼에서 사용할 수 있습니다.
녹음한 데이터는 브라우저에 저장됩니다. 외부로 유출되지 않습니다.
[녹음 앱 on Github Pages](https://w-okada.github.io/voice-changer/)
[설명 영상](https://youtu.be/s_GirFEGvaA)
# 이전 버전
| Version | OS | 프레임워크 | link | 지원 VC | 파일 크기 |
| ---------- | --- | --------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------- |
| v.1.5.2.9e | mac | ONNX(cpu), PyTorch(cpu,mps) | [normal](https://drive.google.com/uc?id=1W0d7I7619PcO7kjb1SPXp6MmH5Unvd78&export=download) \*1 | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 796MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [normal](https://drive.google.com/uc?id=1tmTMJRRggS2Sb4goU-eHlRvUBR88RZDl&export=download) \*1 | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, so-vits-svc 4.0v2, RVC, DDSP-SVC | 2872MB |
| v.1.5.3.1 | mac | ONNX(cpu), PyTorch(cpu,mps) | [normal](https://drive.google.com/uc?id=1oswF72q_cQQeXhIn6W275qLnoBAmcrR_&export=download) \*1 | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, RVC | 796MB |
| | win | ONNX(cpu,cuda), PyTorch(cpu,cuda) | [normal](https://drive.google.com/uc?id=1AWjDhW4w2Uljp1-9P8YUJBZsIlnhkJX2&export=download) \*1 | MMVC v.1.5.x, MMVC v.1.3.x, so-vits-svc 4.0, so-vits-svc 4.0v2, RVC, DDSP-SVC | 2872MB |
# For Contributor
이 리포지토리는 [CLA](https://raw.githubusercontent.com/w-okada/voice-changer/master/LICENSE-CLA)를 설정했습니다.

206
Realtime_Voice_Changer_on_Colab.ipynb
View File

@ -1,206 +0,0 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {
"id": "view-in-github",
"colab_type": "text"
},
"source": [
"<a href=\"https://colab.research.google.com/github/w-okada/voice-changer/blob/master/Realtime_Voice_Changer_on_Colab.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
]
},
{
"cell_type": "markdown",
"source": [
"### [w-okada's Voice Changer](https://github.com/w-okada/voice-changer) | **Colab**\n",
"\n",
"---\n",
"\n",
"## **⬇ VERY IMPORTANT ⬇**\n",
"\n",
"You can use the following settings for better results:\n",
"\n",
"If you're using a index: `f0: RMVPE_ONNX | Chunk: 112 or higher | Extra: 8192`<br>\n",
"If you're not using a index: `f0: RMVPE_ONNX | Chunk: 96 or higher | Extra: 16384`<br>\n",
"**Don't forget to select a T4 GPU in the GPU field, <b>NEVER</b> use CPU!\n",
"> Seems that PTH models performance better than ONNX for now, you can still try ONNX models and see if it satisfies you\n",
"\n",
"\n",
"*You can always [click here](https://github.com/YunaOneeChan/Voice-Changer-Settings) to check if these settings are up-to-date*\n",
"\n",
"---\n",
"\n",
"### <font color=red>⬇ Always use Colab GPU! (**IMPORTANT!**) ⬇</font>\n",
"You need to use a Colab GPU so the Voice Changer can work faster and better\\\n",
"Use the menu above and click on **Runtime** » **Change runtime** » **Hardware acceleration** to select a GPU (**T4 is the free one**)\n",
"\n",
"---\n",
"**Credits**<br>\n",
"Realtime Voice Changer by [w-okada](https://github.com/w-okada)<br>\n",
"Notebook files updated by [rafacasari](https://github.com/Rafacasari)<br>\n",
"Recommended settings by [YunaOneeChan](https://github.com/YunaOneeChan)\n",
"\n",
"**Need help?** [AI Hub Discord](https://discord.gg/aihub) » ***#help-realtime-vc***\n",
"\n",
"---"
],
"metadata": {
"id": "Lbbmx_Vjl0zo"
}
},
{
"cell_type": "code",
"source": [
"# @title Clone repository and install dependencies\n",
"# @markdown This first step will download the latest version of Voice Changer and install the dependencies. **It can take some time to complete.**\n",
"%cd /content/\n",
"\n",
"!pip install colorama --quiet\n",
"from colorama import Fore, Style\n",
"import os\n",
"\n",
"print(f\"{Fore.CYAN}> Cloning the repository...{Style.RESET_ALL}\")\n",
"!git clone https://github.com/w-okada/voice-changer.git --quiet\n",
"print(f\"{Fore.GREEN}> Successfully cloned the repository!{Style.RESET_ALL}\")\n",
"%cd voice-changer/server/\n",
"\n",
"print(f\"{Fore.CYAN}> Installing libportaudio2...{Style.RESET_ALL}\")\n",
"!apt-get -y install libportaudio2 -qq\n",
"\n",
"print(f\"{Fore.CYAN}> Installing pre-dependencies...{Style.RESET_ALL}\")\n",
"# Install dependencies that are missing from requirements.txt and pyngrok\n",
"!pip install faiss-gpu fairseq pyngrok --quiet\n",
"!pip install pyworld --no-build-isolation --quiet\n",
"print(f\"{Fore.CYAN}> Installing dependencies from requirements.txt...{Style.RESET_ALL}\")\n",
"!pip install -r requirements.txt --quiet\n",
"\n",
"print(f\"{Fore.GREEN}> Successfully installed all packages!{Style.RESET_ALL}\")"
],
"metadata": {
"id": "86wTFmqsNMnD",
"cellView": "form",
"_kg_hide-output": false,
"execution": {
"iopub.status.busy": "2023-09-14T04:01:17.308284Z",
"iopub.execute_input": "2023-09-14T04:01:17.308682Z",
"iopub.status.idle": "2023-09-14T04:08:08.475375Z",
"shell.execute_reply.started": "2023-09-14T04:01:17.308652Z",
"shell.execute_reply": "2023-09-14T04:08:08.473827Z"
},
"trusted": true
},
"execution_count": null,
"outputs": []
},
{
"cell_type": "code",
"source": [
"# @title Start Server **using ngrok**\n",
"# @markdown This cell will start the server, the first time that you run it will download the models, so it can take a while (~1-2 minutes)\n",
"\n",
"# @markdown ---\n",
"# @markdown You'll need a ngrok account, but <font color=green>**it's free**</font> and easy to create!\n",
"# @markdown ---\n",
"# @markdown **1** - Create a <font color=green>**free**</font> account at [ngrok](https://dashboard.ngrok.com/signup) or **login with Google/Github account**\\\n",
"# @markdown **2** - If you didn't logged in with Google/Github, you will need to **verify your e-mail**!\\\n",
"# @markdown **3** - Click [this link](https://dashboard.ngrok.com/get-started/your-authtoken) to get your auth token, and place it here:\n",
"Token = '' # @param {type:\"string\"}\n",
"# @markdown **4** - *(optional)* Change to a region near to you or keep at United States if increase latency\\\n",
"# @markdown `Default Region: us - United States (Ohio)`\n",
"Region = \"us - United States (Ohio)\" # @param [\"ap - Asia/Pacific (Singapore)\", \"au - Australia (Sydney)\",\"eu - Europe (Frankfurt)\", \"in - India (Mumbai)\",\"jp - Japan (Tokyo)\",\"sa - South America (Sao Paulo)\", \"us - United States (Ohio)\"]\n",
"\n",
"#@markdown **5** - *(optional)* Other options:\n",
"ClearConsole = True # @param {type:\"boolean\"}\n",
"\n",
"# ---------------------------------\n",
"# DO NOT TOUCH ANYTHING DOWN BELOW!\n",
"# ---------------------------------\n",
"\n",
"%cd /content/voice-changer/server\n",
"\n",
"from pyngrok import conf, ngrok\n",
"MyConfig = conf.PyngrokConfig()\n",
"MyConfig.auth_token = Token\n",
"MyConfig.region = Region[0:2]\n",
"#conf.get_default().authtoken = Token\n",
"#conf.get_default().region = Region\n",
"conf.set_default(MyConfig);\n",
"\n",
"import subprocess, threading, time, socket, urllib.request\n",
"PORT = 8000\n",
"\n",
"from pyngrok import ngrok\n",
"ngrokConnection = ngrok.connect(PORT)\n",
"public_url = ngrokConnection.public_url\n",
"\n",
"from IPython.display import clear_output\n",
"\n",
"def wait_for_server():\n",
" while True:\n",
" time.sleep(0.5)\n",
" sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\n",
" result = sock.connect_ex(('127.0.0.1', PORT))\n",
" if result == 0:\n",
" break\n",
" sock.close()\n",
" if ClearConsole:\n",
" clear_output()\n",
" print(\"--------- SERVER READY! ---------\")\n",
" print(\"Your server is available at:\")\n",
" print(public_url)\n",
" print(\"---------------------------------\")\n",
"\n",
"threading.Thread(target=wait_for_server, daemon=True).start()\n",
"\n",
"!python3 MMVCServerSIO.py \\\n",
" -p {PORT} \\\n",
" --https False \\\n",
" --content_vec_500 pretrain/checkpoint_best_legacy_500.pt \\\n",
" --content_vec_500_onnx pretrain/content_vec_500.onnx \\\n",
" --content_vec_500_onnx_on true \\\n",
" --hubert_base pretrain/hubert_base.pt \\\n",
" --hubert_base_jp pretrain/rinna_hubert_base_jp.pt \\\n",
" --hubert_soft pretrain/hubert/hubert-soft-0d54a1f4.pt \\\n",
" --nsf_hifigan pretrain/nsf_hifigan/model \\\n",
" --crepe_onnx_full pretrain/crepe_onnx_full.onnx \\\n",
" --crepe_onnx_tiny pretrain/crepe_onnx_tiny.onnx \\\n",
" --rmvpe pretrain/rmvpe.pt \\\n",
" --model_dir model_dir \\\n",
" --samples samples.json\n",
"\n",
"ngrok.disconnect(ngrokConnection.public_url)"
],
"metadata": {
"id": "lLWQuUd7WW9U",
"cellView": "form",
"_kg_hide-input": false,
"scrolled": true,
"trusted": true
},
"execution_count": null,
"outputs": []
}
],
"metadata": {
"colab": {
"provenance": [],
"private_outputs": true,
"include_colab_link": true,
"gpuType": "T4",
"collapsed_sections": [
"iuf9pBHYpTn-"
]
},
"kernelspec": {
"display_name": "Python 3",
"name": "python3"
},
"language_info": {
"name": "python"
},
"accelerator": "GPU"
},
"nbformat": 4,
"nbformat_minor": 0
}

11
client/.vscode/settings.json vendored
View File

@ -1,11 +0,0 @@
{
"workbench.colorCustomizations": {
"tab.activeBackground": "#65952acc"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.printWidth": 1024,
"prettier.tabWidth": 4,
"files.associations": {
"*.css": "postcss"
}
}

3
client/buildAllDemo.sh
View File

@ -1,3 +0,0 @@
#!/bin/bash
cd demo && ncu -u && npm install && npm run build:prod && cd -

18
client/demo/.eslintrc.js
View File

@ -1,18 +0,0 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 13,
sourceType: "module",
},
plugins: ["react", "@typescript-eslint"],
rules: {},
};

6
client/demo/.prettierrc
View File

@ -1,6 +0,0 @@
{
"tabWidth": 4,
"useTabs": false,
"semi": true,
"printWidth": 360
}

11
client/demo/.vscode/settings.json vendored
View File

@ -1,11 +0,0 @@
{
"workbench.colorCustomizations": {
"tab.activeBackground": "#65952acc"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.printWidth": 1024,
"prettier.tabWidth": 4,
"files.associations": {
"*.css": "postcss"
}
}

11
client/demo/build-voice-changer-js.sh
View File

@ -1,11 +0,0 @@
# cd ~/git-work/voice-changer-js/lib/ ; npm run build:dev; cd -
# rm -rf node_modules/@dannadori/voice-changer-js
# mkdir -p node_modules/@dannadori/voice-changer-js/dist
# cp -r ~/git-work/voice-changer-js/lib/package.json node_modules/@dannadori/voice-changer-js/
# cp -r ~/git-work/voice-changer-js/lib/dist node_modules/@dannadori/voice-changer-js/
cd ~/git-work/voice-changer-js/lib/ ; npm run build:prod; cd -
rm -rf node_modules/@dannadori/voice-changer-js
mkdir -p node_modules/@dannadori/voice-changer-js/dist
cp -r ~/git-work/voice-changer-js/lib/package.json node_modules/@dannadori/voice-changer-js/
cp -r ~/git-work/voice-changer-js/lib/dist node_modules/@dannadori/voice-changer-js/

928
client/demo/dist/assets/beatrice/female-clickable.svg vendored
View File

@ -1,928 +0,0 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:ns2="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="100 60 420 450" version="1.1">
<metadata>
<rdf:RDF>
<ns2:Work>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:date>2023-11-19T11:21:56.358384</dc:date>
<dc:format>image/svg+xml</dc:format>
<dc:creator>
<ns2:Agent>
<dc:title>Matplotlib v3.7.1, https://matplotlib.org/</dc:title>
</ns2:Agent>
</dc:creator>
</ns2:Work>
</rdf:RDF>
</metadata>
<defs>
<style type="text/css">
* {
stroke-linejoin: round;
stroke-linecap: butt
}
</style>
<style type="text/css">
.beatrice-node-pointer {
cursor: pointer;
}
.beatrice-node-pointer:hover {
stroke: gray;
}
.beatrice-node-pointer-selected {
stroke: #ef6767c2;
stroke-width: 3
}
.beatrice-text-pointer {
cursor: pointer;
pointer-events: none
}
.beatrice-text-pointer:hover {
/* ホバー時のスタイルは既に設定されたスタイルと異なる特定の属性を変更することができます。 */
}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 576 L 576 576 L 576 0 L 0 0 z " style="fill: #ffffff" />
</g>
<g id="axes_1">
<g id="LineCollection_1">
<path d="M 403.96157 149.258085 L 366.630583 148.159991 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 396.547407 371.476481 L 372.120414 365.421971 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 396.547407 371.476481 L 416.760989 346.999139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 396.547407 371.476481 L 404.238335 402.754731 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 258.035169 326.134244 L 298.859694 332.465911 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 167.453327 366.897955 L 203.987537 347.931194 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 436.352807 416.173738 L 404.238335 402.754731 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 391.514336 242.048236 L 417.560846 259.464346 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 391.514336 242.048236 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 391.514336 242.048236 L 424.070309 219.021704 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 205.541044 459.711101 L 230.303076 436.148139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 160.44225 292.540336 L 167.396334 325.961848 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.679012 107.607273 L 366.630583 148.159991 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 325.345004 219.195921 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 325.345004 219.195921 L 297.530501 194.55124 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 363.075301 201.701937 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 363.075301 201.701937 L 341.462109 170.414842 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 366.630583 148.159991 L 341.462109 170.414842 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 167.396334 325.961848 L 203.987537 347.931194 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 262.111309 181.887977 L 297.530501 194.55124 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 189.293496 262.735141 L 222.122563 261.416721 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 277.95603 462.622539 L 293.230217 421.393405 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 333.932593 269.342364 L 301.9174 258.124913 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 333.932593 269.342364 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 334.666605 338.097578 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 203.987537 347.931194 L 242.811958 354.082183 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 276.198518 388.99868 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 298.859694 332.465911 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 242.811958 354.082183 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 276.198518 388.99868 L 293.230217 421.393405 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 293.230217 421.393405 L 309.530924 454.827332 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 293.230217 421.393405 L 260.004712 426.426278 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 423.853712 378.321354 L 404.238335 402.754731 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 205.214352 217.066163 L 222.122563 261.416721 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 154.047193 423.153273 L 193.933786 408.004355 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 298.859694 332.465911 L 277.79477 306.980241 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 277.79477 306.980241 L 282.261978 282.779534 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 260.004712 426.426278 L 230.303076 436.148139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 260.004712 426.426278 L 228.689744 409.959215 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 260.004712 426.426278 L 261.506403 474.152727 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 301.9174 258.124913 L 282.261978 282.779534 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 254.897329 263.033159 L 282.261978 282.779534 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 254.897329 263.033159 L 222.122563 261.416721 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 321.267463 403.021207 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.750267 380.131711 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.750267 380.131711 L 372.120414 365.421971 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.750267 380.131711 L 351.226176 419.342667 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 404.238335 402.754731 L 400.607869 434.730447 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 193.933786 408.004355 L 230.303076 436.148139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
</g>
<g id="PathCollection_1">
<defs>
<path id="C0_0_b0ffb3bf4a"
d="M 0 11.18034 C 2.965061 11.18034 5.80908 10.002309 7.905694 7.905694 C 10.002309 5.80908 11.18034 2.965061 11.18034 -0 C 11.18034 -2.965061 10.002309 -5.80908 7.905694 -7.905694 C 5.80908 -10.002309 2.965061 -11.18034 0 -11.18034 C -2.965061 -11.18034 -5.80908 -10.002309 -7.905694 -7.905694 C -10.002309 -5.80908 -11.18034 -2.965061 -11.18034 0 C -11.18034 2.965061 -10.002309 5.80908 -7.905694 7.905694 C -5.80908 10.002309 -2.965061 11.18034 0 11.18034 z " />
</defs>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-0"
onclick="(()=&gt;{console.log('node 0')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="403.96157" y="149.258085" style="fill: #e7f5d2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-1"
onclick="(()=&gt;{console.log('node 1')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="396.547407" y="371.476481" style="fill: #fbe8f2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-2"
onclick="(()=&gt;{console.log('node 2')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="258.035169" y="326.134244" style="fill: #cfebaa" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-3"
onclick="(()=&gt;{console.log('node 3')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="167.453327" y="366.897955" style="fill: #f1f6e8" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-4"
onclick="(()=&gt;{console.log('node 4')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="436.352807" y="416.173738" style="fill: #e89ac6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-5"
onclick="(()=&gt;{console.log('node 5')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="391.514336" y="242.048236" style="fill: #f3bcdd" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-6"
onclick="(()=&gt;{console.log('node 6')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="205.541044" y="459.711101" style="fill: #fbd9ec" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-7"
onclick="(()=&gt;{console.log('node 7')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="160.44225" y="292.540336" style="fill: #9ed067" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-8"
onclick="(()=&gt;{console.log('node 8')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="424.070309" y="219.021704" style="fill: #e1f3c7" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-9"
onclick="(()=&gt;{console.log('node 9')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="345.679012" y="107.607273" style="fill: #d0ecad" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-10"
onclick="(()=&gt;{console.log('node 10')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="325.345004" y="219.195921" style="fill: #eff6e4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-11"
onclick="(()=&gt;{console.log('node 11')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="363.075301" y="201.701937" style="fill: #f9f0f5" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-12"
onclick="(()=&gt;{console.log('node 12')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="366.630583" y="148.159991" style="fill: #ebf6dc" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-13"
onclick="(()=&gt;{console.log('node 13')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="341.462109" y="170.414842" style="fill: #fad6ea" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-14"
onclick="(()=&gt;{console.log('node 14')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="167.396334" y="325.961848" style="fill: #f5f7f3" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-15"
onclick="(()=&gt;{console.log('node 15')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="262.111309" y="181.887977" style="fill: #e9f5d6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-16"
onclick="(()=&gt;{console.log('node 16')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="189.293496" y="262.735141" style="fill: #fce5f1" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-17"
onclick="(()=&gt;{console.log('node 17')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="277.95603" y="462.622539" style="fill: #c4e699" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-18"
onclick="(()=&gt;{console.log('node 18')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="333.932593" y="269.342364" style="fill: #f8f4f6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-19"
onclick="(()=&gt;{console.log('node 19')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="416.760989" y="346.999139" style="fill: #eef6e2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-20"
onclick="(()=&gt;{console.log('node 20')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="334.666605" y="338.097578" style="fill: #f5f7f3" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-21"
onclick="(()=&gt;{console.log('node 21')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="203.987537" y="347.931194" style="fill: #edf6df" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-22"
onclick="(()=&gt;{console.log('node 22')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="288.059985" y="363.924972" style="fill: #ddf1c1" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-23"
onclick="(()=&gt;{console.log('node 23')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="276.198518" y="388.99868" style="fill: #f5f7f3" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-24"
onclick="(()=&gt;{console.log('node 24')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="293.230217" y="421.393405" style="fill: #f3f7ef" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-25"
onclick="(()=&gt;{console.log('node 25')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="423.853712" y="378.321354" style="fill: #edf6df" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-26"
onclick="(()=&gt;{console.log('node 26')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="205.214352" y="217.066163" style="fill: #e7f5d2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-27"
onclick="(()=&gt;{console.log('node 27')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="242.811958" y="354.082183" style="fill: #d2ecb0" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-28"
onclick="(()=&gt;{console.log('node 28')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="154.047193" y="423.153273" style="fill: #e6f5d0" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-29"
onclick="(()=&gt;{console.log('node 29')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="298.859694" y="332.465911" style="fill: #ecf6de" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-30"
onclick="(()=&gt;{console.log('node 30')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="277.79477" y="306.980241" style="fill: #eaf5d9" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-31"
onclick="(()=&gt;{console.log('node 31')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="260.004712" y="426.426278" style="fill: #f9f1f5" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-32"
onclick="(()=&gt;{console.log('node 32')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="301.9174" y="258.124913" style="fill: #dbf0bf" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-33"
onclick="(()=&gt;{console.log('node 33')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="254.897329" y="263.033159" style="fill: #eff6e4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-34"
onclick="(()=&gt;{console.log('node 34')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="321.267463" y="403.021207" style="fill: #d0ecad" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-35"
onclick="(()=&gt;{console.log('node 35')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="345.750267" y="380.131711" style="fill: #f9eef4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-36"
onclick="(()=&gt;{console.log('node 36')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="404.238335" y="402.754731" style="fill: #f9eef4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-37"
onclick="(()=&gt;{console.log('node 37')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="355.734145" y="235.68791" style="fill: #f9eef4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-38"
onclick="(()=&gt;{console.log('node 38')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="193.933786" y="408.004355" style="fill: #f0f6e7" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-39"
onclick="(()=&gt;{console.log('node 39')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="297.530501" y="194.55124" style="fill: #f3f6ed" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-40"
onclick="(()=&gt;{console.log('node 40')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="320.07566" y="368.578481" style="fill: #dbf0bf" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-41"
onclick="(()=&gt;{console.log('node 41')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="228.689744" y="409.959215" style="fill: #f9eff4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-42"
onclick="(()=&gt;{console.log('node 42')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="351.226176" y="419.342667" style="fill: #cfebaa" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-43"
onclick="(()=&gt;{console.log('node 43')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="372.120414" y="365.421971" style="fill: #f7f6f7" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-44"
onclick="(()=&gt;{console.log('node 44')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="230.303076" y="436.148139" style="fill: #f8cee6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-45"
onclick="(()=&gt;{console.log('node 45')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="261.506403" y="474.152727" style="fill: #e6f5d0" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-46"
onclick="(()=&gt;{console.log('node 46')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="417.560846" y="259.464346" style="fill: #b7e085" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-47"
onclick="(()=&gt;{console.log('node 47')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="400.607869" y="434.730447" style="fill: #f8cee6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-48"
onclick="(()=&gt;{console.log('node 48')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="282.261978" y="282.779534" style="fill: #d6eeb6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-49"
onclick="(()=&gt;{console.log('node 49')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="222.122563" y="261.416721" style="fill: #edf6df" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-50"
onclick="(()=&gt;{console.log('node 50')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="309.530924" y="454.827332" style="fill: #f9eef4" />
</g>
</g>
<g id="beatrice-text-female-0" onclick="(()=&gt;{console.log('text 0 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(399.786883 152.569335) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-32"
d="M 1844 884 L 3897 884 L 3897 0 L 506 0 L 506 884 L 2209 2388 Q 2438 2594 2547 2791 Q 2656 2988 2656 3200 Q 2656 3528 2436 3728 Q 2216 3928 1850 3928 Q 1569 3928 1234 3808 Q 900 3688 519 3450 L 519 4475 Q 925 4609 1322 4679 Q 1719 4750 2100 4750 Q 2938 4750 3402 4381 Q 3866 4013 3866 3353 Q 3866 2972 3669 2642 Q 3472 2313 2841 1759 L 1844 884 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-32" />
</g>
</g>
</g>
<g id="beatrice-text-female-1" onclick="(()=&gt;{console.log('text 1 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(392.37272 374.787731) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-34"
d="M 2356 3675 L 1038 1722 L 2356 1722 L 2356 3675 z M 2156 4666 L 3494 4666 L 3494 1722 L 4159 1722 L 4159 850 L 3494 850 L 3494 0 L 2356 0 L 2356 850 L 288 850 L 288 1881 L 2156 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-34" />
</g>
</g>
</g>
<g id="beatrice-text-female-2" onclick="(()=&gt;{console.log('text 2 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(253.860482 329.445494) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-37"
d="M 428 4666 L 3944 4666 L 3944 3988 L 2125 0 L 953 0 L 2675 3781 L 428 3781 L 428 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-37" />
</g>
</g>
</g>
<g id="beatrice-text-female-3" onclick="(()=&gt;{console.log('text 3 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(163.27864 370.209205) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-38"
d="M 2228 2088 Q 1891 2088 1709 1903 Q 1528 1719 1528 1375 Q 1528 1031 1709 848 Q 1891 666 2228 666 Q 2563 666 2741 848 Q 2919 1031 2919 1375 Q 2919 1722 2741 1905 Q 2563 2088 2228 2088 z M 1350 2484 Q 925 2613 709 2878 Q 494 3144 494 3541 Q 494 4131 934 4440 Q 1375 4750 2228 4750 Q 3075 4750 3515 4442 Q 3956 4134 3956 3541 Q 3956 3144 3739 2878 Q 3522 2613 3097 2484 Q 3572 2353 3814 2058 Q 4056 1763 4056 1313 Q 4056 619 3595 264 Q 3134 -91 2228 -91 Q 1319 -91 855 264 Q 391 619 391 1313 Q 391 1763 633 2058 Q 875 2353 1350 2484 z M 1631 3419 Q 1631 3141 1786 2991 Q 1941 2841 2228 2841 Q 2509 2841 2662 2991 Q 2816 3141 2816 3419 Q 2816 3697 2662 3845 Q 2509 3994 2228 3994 Q 1941 3994 1786 3844 Q 1631 3694 1631 3419 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-38" />
</g>
</g>
</g>
<g id="beatrice-text-female-4" onclick="(()=&gt;{console.log('text 4 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(428.003432 419.484988) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-31"
d="M 750 831 L 1813 831 L 1813 3847 L 722 3622 L 722 4441 L 1806 4666 L 2950 4666 L 2950 831 L 4013 831 L 4013 0 L 750 0 L 750 831 z "
transform="scale(0.015625)" />
<path id="DejaVuSans-Bold-30"
d="M 2944 2338 Q 2944 3213 2780 3570 Q 2616 3928 2228 3928 Q 1841 3928 1675 3570 Q 1509 3213 1509 2338 Q 1509 1453 1675 1090 Q 1841 728 2228 728 Q 2613 728 2778 1090 Q 2944 1453 2944 2338 z M 4147 2328 Q 4147 1169 3647 539 Q 3147 -91 2228 -91 Q 1306 -91 806 539 Q 306 1169 306 2328 Q 306 3491 806 4120 Q 1306 4750 2228 4750 Q 3147 4750 3647 4120 Q 4147 3491 4147 2328 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-5" onclick="(()=&gt;{console.log('text 5 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(383.164961 245.359486) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-6" onclick="(()=&gt;{console.log('text 6 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(197.191669 463.022351) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-35"
d="M 678 4666 L 3669 4666 L 3669 3781 L 1638 3781 L 1638 3059 Q 1775 3097 1914 3117 Q 2053 3138 2203 3138 Q 3056 3138 3531 2711 Q 4006 2284 4006 1522 Q 4006 766 3489 337 Q 2972 -91 2053 -91 Q 1656 -91 1267 -14 Q 878 63 494 219 L 494 1166 Q 875 947 1217 837 Q 1559 728 1863 728 Q 2300 728 2551 942 Q 2803 1156 2803 1522 Q 2803 1891 2551 2103 Q 2300 2316 1863 2316 Q 1603 2316 1309 2248 Q 1016 2181 678 2041 L 678 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-7" onclick="(()=&gt;{console.log('text 7 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(152.092875 295.851586) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-36"
d="M 2316 2303 Q 2000 2303 1842 2098 Q 1684 1894 1684 1484 Q 1684 1075 1842 870 Q 2000 666 2316 666 Q 2634 666 2792 870 Q 2950 1075 2950 1484 Q 2950 1894 2792 2098 Q 2634 2303 2316 2303 z M 3803 4544 L 3803 3681 Q 3506 3822 3243 3889 Q 2981 3956 2731 3956 Q 2194 3956 1894 3657 Q 1594 3359 1544 2772 Q 1750 2925 1990 3001 Q 2231 3078 2516 3078 Q 3231 3078 3670 2659 Q 4109 2241 4109 1563 Q 4109 813 3618 361 Q 3128 -91 2303 -91 Q 1394 -91 895 523 Q 397 1138 397 2266 Q 397 3422 980 4083 Q 1563 4744 2578 4744 Q 2900 4744 3203 4694 Q 3506 4644 3803 4544 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-8" onclick="(()=&gt;{console.log('text 8 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(415.720934 222.332954) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-9" onclick="(()=&gt;{console.log('text 9 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(337.329637 110.918523) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-10" onclick="(()=&gt;{console.log('text 10 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(316.995629 222.507171) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-39"
d="M 641 103 L 641 966 Q 928 831 1190 764 Q 1453 697 1709 697 Q 2247 697 2547 995 Q 2847 1294 2900 1881 Q 2688 1725 2447 1647 Q 2206 1569 1925 1569 Q 1209 1569 770 1986 Q 331 2403 331 3084 Q 331 3838 820 4291 Q 1309 4744 2131 4744 Q 3044 4744 3544 4128 Q 4044 3513 4044 2388 Q 4044 1231 3459 570 Q 2875 -91 1856 -91 Q 1528 -91 1228 -42 Q 928 6 641 103 z M 2125 2350 Q 2441 2350 2600 2554 Q 2759 2759 2759 3169 Q 2759 3575 2600 3781 Q 2441 3988 2125 3988 Q 1809 3988 1650 3781 Q 1491 3575 1491 3169 Q 1491 2759 1650 2554 Q 1809 2350 2125 2350 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-11" onclick="(()=&gt;{console.log('text 11 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(354.725926 205.013187) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-12" onclick="(()=&gt;{console.log('text 12 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(358.281208 151.471241) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-13" onclick="(()=&gt;{console.log('text 13 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(333.112734 173.726092) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-14" onclick="(()=&gt;{console.log('text 14 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(159.046959 329.273098) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-15" onclick="(()=&gt;{console.log('text 15 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(253.761934 185.199227) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-16" onclick="(()=&gt;{console.log('text 16 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(180.944121 266.046391) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-33"
d="M 2981 2516 Q 3453 2394 3698 2092 Q 3944 1791 3944 1325 Q 3944 631 3412 270 Q 2881 -91 1863 -91 Q 1503 -91 1142 -33 Q 781 25 428 141 L 428 1069 Q 766 900 1098 814 Q 1431 728 1753 728 Q 2231 728 2486 893 Q 2741 1059 2741 1369 Q 2741 1688 2480 1852 Q 2219 2016 1709 2016 L 1228 2016 L 1228 2791 L 1734 2791 Q 2188 2791 2409 2933 Q 2631 3075 2631 3366 Q 2631 3634 2415 3781 Q 2200 3928 1806 3928 Q 1516 3928 1219 3862 Q 922 3797 628 3669 L 628 4550 Q 984 4650 1334 4700 Q 1684 4750 2022 4750 Q 2931 4750 3382 4451 Q 3834 4153 3834 3553 Q 3834 3144 3618 2883 Q 3403 2622 2981 2516 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-17" onclick="(()=&gt;{console.log('text 17 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(269.606655 465.933789) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-18" onclick="(()=&gt;{console.log('text 18 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(325.583218 272.653614) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-19" onclick="(()=&gt;{console.log('text 19 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(408.411614 350.310389) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-20" onclick="(()=&gt;{console.log('text 20 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(326.31723 341.408828) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-21" onclick="(()=&gt;{console.log('text 21 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(195.638162 351.242444) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-22" onclick="(()=&gt;{console.log('text 22 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(279.71061 367.236222) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-23" onclick="(()=&gt;{console.log('text 23 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(267.849143 392.30993) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-24" onclick="(()=&gt;{console.log('text 24 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(284.880842 424.704655) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-25" onclick="(()=&gt;{console.log('text 25 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(415.504337 381.632604) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-26" onclick="(()=&gt;{console.log('text 26 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(196.864977 220.377413) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-27" onclick="(()=&gt;{console.log('text 27 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(234.462583 357.393433) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-28" onclick="(()=&gt;{console.log('text 28 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(145.697818 426.464523) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-29" onclick="(()=&gt;{console.log('text 29 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(290.510319 335.777161) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-30" onclick="(()=&gt;{console.log('text 30 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(269.445395 310.291491) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-31" onclick="(()=&gt;{console.log('text 31 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(251.655337 429.737528) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-32" onclick="(()=&gt;{console.log('text 32 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(293.568025 261.436163) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-33" onclick="(()=&gt;{console.log('text 33 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(246.547954 266.344409) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-34" onclick="(()=&gt;{console.log('text 34 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(312.918088 406.332457) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-35" onclick="(()=&gt;{console.log('text 35 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(337.400892 383.442961) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-36" onclick="(()=&gt;{console.log('text 36 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(395.88896 406.065981) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-37" onclick="(()=&gt;{console.log('text 37 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(347.38477 238.99916) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-38" onclick="(()=&gt;{console.log('text 38 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(185.584411 411.315605) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-39" onclick="(()=&gt;{console.log('text 39 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(289.181126 197.86249) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-40" onclick="(()=&gt;{console.log('text 40 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(311.726285 371.889731) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-41" onclick="(()=&gt;{console.log('text 41 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(220.340369 413.270465) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-42" onclick="(()=&gt;{console.log('text 42 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(342.876801 422.653917) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-43" onclick="(()=&gt;{console.log('text 43 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(363.771039 368.733221) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-44" onclick="(()=&gt;{console.log('text 44 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(221.953701 439.459389) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-45" onclick="(()=&gt;{console.log('text 45 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(253.157028 477.463977) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-46" onclick="(()=&gt;{console.log('text 46 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(409.211471 262.775596) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-47" onclick="(()=&gt;{console.log('text 47 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(392.258494 438.041697) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-48" onclick="(()=&gt;{console.log('text 48 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(273.912603 286.090784) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-49" onclick="(()=&gt;{console.log('text 49 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(213.773188 264.727971) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-50" onclick="(()=&gt;{console.log('text 50 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(301.181549 458.138582) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="pe3de578e26">
<rect x="124.405104" y="69.12" width="341.589792" height="443.52" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

898
client/demo/dist/assets/beatrice/male-clickable.svg vendored
View File

@ -1,898 +0,0 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:ns2="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="100 60 420 450" version="1.1">
<metadata>
<rdf:RDF>
<ns2:Work>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:date>2023-11-19T11:21:55.705408</dc:date>
<dc:format>image/svg+xml</dc:format>
<dc:creator>
<ns2:Agent>
<dc:title>Matplotlib v3.7.1, https://matplotlib.org/</dc:title>
</ns2:Agent>
</dc:creator>
</ns2:Work>
</rdf:RDF>
</metadata>
<defs>
<style type="text/css">
* {
stroke-linejoin: round;
stroke-linecap: butt
}
</style>
<style type="text/css">
.beatrice-node-pointer {
cursor: pointer;
}
.beatrice-node-pointer:hover {
stroke: gray;
}
.beatrice-node-pointer-selected {
stroke: #ef6767c2;
stroke-width: 3
}
.beatrice-text-pointer {
cursor: pointer;
pointer-events: none
}
.beatrice-text-pointer:hover {
/* ホバー時のスタイルは既に設定されたスタイルと異なる特定の属性を変更することができます。 */
}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 576 L 576 576 L 576 0 L 0 0 z " style="fill: #ffffff" />
</g>
<g id="axes_1">
<g id="LineCollection_1">
<path d="M 383.475478 335.382791 L 350.123561 336.312105 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 383.475478 335.382791 L 393.562573 295.917472 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 383.475478 335.382791 L 396.396073 371.656412 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 395.592267 184.349842 L 344.302973 166.290216 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 166.614267 246.553188 L 214.405523 244.575019 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 389.299516 416.267064 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 367.134249 434.454954 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 396.396073 371.656412 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 321.091057 403.95329 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 291.699254 114.456198 L 287.429936 148.935339 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 309.72476 346.813492 L 326.464644 303.679747 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 396.396073 371.656412 L 422.276969 403.842356 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 396.396073 371.656412 L 419.504487 334.14189 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 311.713 188.802087 L 278.840744 190.572938 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 311.713 188.802087 L 287.429936 148.935339 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 311.713 188.802087 L 344.302973 166.290216 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 213.805036 285.720019 L 216.196468 317.113868 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 213.805036 285.720019 L 241.321249 255.242558 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 213.805036 285.720019 L 169.41455 268.66905 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 326.464644 303.679747 L 341.073251 272.287852 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 326.464644 303.679747 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 326.464644 303.679747 L 350.123561 336.312105 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 468.104517 290.196764 L 453.314054 329.209099 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 252.522958 107.607273 L 287.429936 148.935339 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 241.817 158.353487 L 278.840744 190.572938 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 278.840744 190.572938 L 264.569363 223.030096 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 190.32114 223.314542 L 214.405523 244.575019 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 233.41271 348.401671 L 216.196468 317.113868 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 122.295483 352.502553 L 162.445269 355.484449 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 158.624602 400.46174 L 162.445269 355.484449 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 214.405523 244.575019 L 241.321249 255.242558 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 214.405523 244.575019 L 207.563253 203.013335 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 264.569363 223.030096 L 298.808991 236.296491 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 264.569363 223.030096 L 241.321249 255.242558 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 264.569363 223.030096 L 236.649711 206.251683 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 220.79649 394.869471 L 213.931911 434.927829 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 220.79649 394.869471 L 208.453065 361.465389 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 241.321249 255.242558 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 257.120877 296.156882 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 453.314054 329.209099 L 419.504487 334.14189 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 287.180764 309.56402 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 287.429936 148.935339 L 321.071206 134.027026 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 300.632415 433.812968 L 321.091057 403.95329 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 216.196468 317.113868 L 181.944484 318.835753 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 216.196468 317.113868 L 208.453065 361.465389 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 419.504487 334.14189 L 436.061109 363.566053 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 366.514998 474.152727 L 367.134249 434.454954 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 208.453065 361.465389 L 162.445269 355.484449 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
</g>
<g id="PathCollection_1">
<defs>
<path id="C0_0_3858269516"
d="M 0 11.18034 C 2.965061 11.18034 5.80908 10.002309 7.905694 7.905694 C 10.002309 5.80908 11.18034 2.965061 11.18034 -0 C 11.18034 -2.965061 10.002309 -5.80908 7.905694 -7.905694 C 5.80908 -10.002309 2.965061 -11.18034 0 -11.18034 C -2.965061 -11.18034 -5.80908 -10.002309 -7.905694 -7.905694 C -10.002309 -5.80908 -11.18034 -2.965061 -11.18034 0 C -11.18034 2.965061 -10.002309 5.80908 -7.905694 7.905694 C -5.80908 10.002309 -2.965061 11.18034 0 11.18034 z " />
</defs>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-0" onclick="(()=&gt;{console.log('node 0')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="383.475478" y="335.382791" style="fill: #fde2bb" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-1" onclick="(()=&gt;{console.log('node 1')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="393.562573" y="295.917472" style="fill: #fdba68" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-2" onclick="(()=&gt;{console.log('node 2')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="395.592267" y="184.349842" style="fill: #fbe9cf" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-3" onclick="(()=&gt;{console.log('node 3')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="166.614267" y="246.553188" style="fill: #7e70ab" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-4" onclick="(()=&gt;{console.log('node 4')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="362.886037" y="395.352171" style="fill: #e8e9f1" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-5" onclick="(()=&gt;{console.log('node 5')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="291.699254" y="114.456198" style="fill: #f9b158" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-6" onclick="(()=&gt;{console.log('node 6')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="309.72476" y="346.813492" style="fill: #e4e5f0" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-7" onclick="(()=&gt;{console.log('node 7')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="396.396073" y="371.656412" style="fill: #fdcc8c" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-8" onclick="(()=&gt;{console.log('node 8')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="311.713" y="188.802087" style="fill: #fedeb3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-9" onclick="(()=&gt;{console.log('node 9')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="213.805036" y="285.720019" style="fill: #bab5d7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-10"
onclick="(()=&gt;{console.log('node 10')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="326.464644" y="303.679747" style="fill: #eaebf2" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-11"
onclick="(()=&gt;{console.log('node 11')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="468.104517" y="290.196764" style="fill: #f7f7f6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-12"
onclick="(()=&gt;{console.log('node 12')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="169.41455" y="268.66905" style="fill: #dfe1ee" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-13"
onclick="(()=&gt;{console.log('node 13')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="252.522958" y="107.607273" style="fill: #eff0f4" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-14"
onclick="(()=&gt;{console.log('node 14')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="241.817" y="158.353487" style="fill: #e58a20" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-15"
onclick="(()=&gt;{console.log('node 15')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="278.840744" y="190.572938" style="fill: #fedbac" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-16"
onclick="(()=&gt;{console.log('node 16')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="190.32114" y="223.314542" style="fill: #dfe1ee" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-17"
onclick="(()=&gt;{console.log('node 17')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="233.41271" y="348.401671" style="fill: #c3c0dd" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-18"
onclick="(()=&gt;{console.log('node 18')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="122.295483" y="352.502553" style="fill: #fed8a6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-19"
onclick="(()=&gt;{console.log('node 19')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="158.624602" y="400.46174" style="fill: #f7f6f3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-20"
onclick="(()=&gt;{console.log('node 20')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="214.405523" y="244.575019" style="fill: #f9f2e9" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-21"
onclick="(()=&gt;{console.log('node 21')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="264.569363" y="223.030096" style="fill: #faecd7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-22"
onclick="(()=&gt;{console.log('node 22')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="220.79649" y="394.869471" style="fill: #fbead2" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-23"
onclick="(()=&gt;{console.log('node 23')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="344.302973" y="166.290216" style="fill: #feddaf" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-24"
onclick="(()=&gt;{console.log('node 24')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="241.321249" y="255.242558" style="fill: #c3c0dd" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-25"
onclick="(()=&gt;{console.log('node 25')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="257.120877" y="296.156882" style="fill: #f9f0e4" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-26"
onclick="(()=&gt;{console.log('node 26')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="207.563253" y="203.013335" style="fill: #fbebd5" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-27"
onclick="(()=&gt;{console.log('node 27')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="453.314054" y="329.209099" style="fill: #fdc47b" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-28"
onclick="(()=&gt;{console.log('node 28')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="350.123561" y="336.312105" style="fill: #fbe9cf" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-29"
onclick="(()=&gt;{console.log('node 29')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="287.180764" y="309.56402" style="fill: #f7f6f3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-30"
onclick="(()=&gt;{console.log('node 30')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="287.429936" y="148.935339" style="fill: #fbebd5" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-31"
onclick="(()=&gt;{console.log('node 31')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="281.878613" y="277.846944" style="fill: #d1d1e6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-32"
onclick="(()=&gt;{console.log('node 32')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="300.632415" y="433.812968" style="fill: #fde2bb" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-33"
onclick="(()=&gt;{console.log('node 33')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="216.196468" y="317.113868" style="fill: #dddfed" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-34"
onclick="(()=&gt;{console.log('node 34')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="419.504487" y="334.14189" style="fill: #fdc57f" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-35"
onclick="(()=&gt;{console.log('node 35')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="321.071206" y="134.027026" style="fill: #fee0b6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-36"
onclick="(()=&gt;{console.log('node 36')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="366.514998" y="474.152727" style="fill: #fdbd6e" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-37"
onclick="(()=&gt;{console.log('node 37')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="208.453065" y="361.465389" style="fill: #cccbe3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-38"
onclick="(()=&gt;{console.log('node 38')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="236.649711" y="206.251683" style="fill: #faecd7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-39"
onclick="(()=&gt;{console.log('node 39')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="298.808991" y="236.296491" style="fill: #fdc57f" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-40"
onclick="(()=&gt;{console.log('node 40')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="181.944484" y="318.835753" style="fill: #f9f0e4" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-41"
onclick="(()=&gt;{console.log('node 41')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="367.134249" y="434.454954" style="fill: #f6f6f7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-42"
onclick="(()=&gt;{console.log('node 42')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="422.276969" y="403.842356" style="fill: #fdbf72" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-43"
onclick="(()=&gt;{console.log('node 43')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="321.091057" y="403.95329" style="fill: #f8f5f1" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-44"
onclick="(()=&gt;{console.log('node 44')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="162.445269" y="355.484449" style="fill: #eaebf2" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-45"
onclick="(()=&gt;{console.log('node 45')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="341.073251" y="272.287852" style="fill: #f6aa4f" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-46"
onclick="(()=&gt;{console.log('node 46')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="389.299516" y="416.267064" style="fill: #de8013" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-47"
onclick="(()=&gt;{console.log('node 47')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="213.931911" y="434.927829" style="fill: #fbb55e" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-48"
onclick="(()=&gt;{console.log('node 48')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="436.061109" y="363.566053" style="fill: #ebecf3" />
</g>
</g>
<g id="beatrice-text-male-0" onclick="(()=&gt;{console.log('text 0 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(379.30079 338.694041) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-31"
d="M 750 831 L 1813 831 L 1813 3847 L 722 3622 L 722 4441 L 1806 4666 L 2950 4666 L 2950 831 L 4013 831 L 4013 0 L 750 0 L 750 831 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
</g>
</g>
</g>
<g id="beatrice-text-male-1" onclick="(()=&gt;{console.log('text 1 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(389.387885 299.228722) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-33"
d="M 2981 2516 Q 3453 2394 3698 2092 Q 3944 1791 3944 1325 Q 3944 631 3412 270 Q 2881 -91 1863 -91 Q 1503 -91 1142 -33 Q 781 25 428 141 L 428 1069 Q 766 900 1098 814 Q 1431 728 1753 728 Q 2231 728 2486 893 Q 2741 1059 2741 1369 Q 2741 1688 2480 1852 Q 2219 2016 1709 2016 L 1228 2016 L 1228 2791 L 1734 2791 Q 2188 2791 2409 2933 Q 2631 3075 2631 3366 Q 2631 3634 2415 3781 Q 2200 3928 1806 3928 Q 1516 3928 1219 3862 Q 922 3797 628 3669 L 628 4550 Q 984 4650 1334 4700 Q 1684 4750 2022 4750 Q 2931 4750 3382 4451 Q 3834 4153 3834 3553 Q 3834 3144 3618 2883 Q 3403 2622 2981 2516 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
</g>
</g>
</g>
<g id="beatrice-text-male-2" onclick="(()=&gt;{console.log('text 2 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(391.41758 187.661092) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-35"
d="M 678 4666 L 3669 4666 L 3669 3781 L 1638 3781 L 1638 3059 Q 1775 3097 1914 3117 Q 2053 3138 2203 3138 Q 3056 3138 3531 2711 Q 4006 2284 4006 1522 Q 4006 766 3489 337 Q 2972 -91 2053 -91 Q 1656 -91 1267 -14 Q 878 63 494 219 L 494 1166 Q 875 947 1217 837 Q 1559 728 1863 728 Q 2300 728 2551 942 Q 2803 1156 2803 1522 Q 2803 1891 2551 2103 Q 2300 2316 1863 2316 Q 1603 2316 1309 2248 Q 1016 2181 678 2041 L 678 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-35" />
</g>
</g>
</g>
<g id="beatrice-text-male-3" onclick="(()=&gt;{console.log('text 3 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(162.43958 249.864438) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-36"
d="M 2316 2303 Q 2000 2303 1842 2098 Q 1684 1894 1684 1484 Q 1684 1075 1842 870 Q 2000 666 2316 666 Q 2634 666 2792 870 Q 2950 1075 2950 1484 Q 2950 1894 2792 2098 Q 2634 2303 2316 2303 z M 3803 4544 L 3803 3681 Q 3506 3822 3243 3889 Q 2981 3956 2731 3956 Q 2194 3956 1894 3657 Q 1594 3359 1544 2772 Q 1750 2925 1990 3001 Q 2231 3078 2516 3078 Q 3231 3078 3670 2659 Q 4109 2241 4109 1563 Q 4109 813 3618 361 Q 3128 -91 2303 -91 Q 1394 -91 895 523 Q 397 1138 397 2266 Q 397 3422 980 4083 Q 1563 4744 2578 4744 Q 2900 4744 3203 4694 Q 3506 4644 3803 4544 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-36" />
</g>
</g>
</g>
<g id="beatrice-text-male-4" onclick="(()=&gt;{console.log('text 4 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(358.71135 398.663421) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-39"
d="M 641 103 L 641 966 Q 928 831 1190 764 Q 1453 697 1709 697 Q 2247 697 2547 995 Q 2847 1294 2900 1881 Q 2688 1725 2447 1647 Q 2206 1569 1925 1569 Q 1209 1569 770 1986 Q 331 2403 331 3084 Q 331 3838 820 4291 Q 1309 4744 2131 4744 Q 3044 4744 3544 4128 Q 4044 3513 4044 2388 Q 4044 1231 3459 570 Q 2875 -91 1856 -91 Q 1528 -91 1228 -42 Q 928 6 641 103 z M 2125 2350 Q 2441 2350 2600 2554 Q 2759 2759 2759 3169 Q 2759 3575 2600 3781 Q 2441 3988 2125 3988 Q 1809 3988 1650 3781 Q 1491 3575 1491 3169 Q 1491 2759 1650 2554 Q 1809 2350 2125 2350 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-39" />
</g>
</g>
</g>
<g id="beatrice-text-male-5" onclick="(()=&gt;{console.log('text 5 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(283.349879 117.767448) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-6" onclick="(()=&gt;{console.log('text 6 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(301.375385 350.124742) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-32"
d="M 1844 884 L 3897 884 L 3897 0 L 506 0 L 506 884 L 2209 2388 Q 2438 2594 2547 2791 Q 2656 2988 2656 3200 Q 2656 3528 2436 3728 Q 2216 3928 1850 3928 Q 1569 3928 1234 3808 Q 900 3688 519 3450 L 519 4475 Q 925 4609 1322 4679 Q 1719 4750 2100 4750 Q 2938 4750 3402 4381 Q 3866 4013 3866 3353 Q 3866 2972 3669 2642 Q 3472 2313 2841 1759 L 1844 884 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-7" onclick="(()=&gt;{console.log('text 7 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(388.046698 374.967662) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-8" onclick="(()=&gt;{console.log('text 8 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(303.363625 192.113337) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-30"
d="M 2944 2338 Q 2944 3213 2780 3570 Q 2616 3928 2228 3928 Q 1841 3928 1675 3570 Q 1509 3213 1509 2338 Q 1509 1453 1675 1090 Q 1841 728 2228 728 Q 2613 728 2778 1090 Q 2944 1453 2944 2338 z M 4147 2328 Q 4147 1169 3647 539 Q 3147 -91 2228 -91 Q 1306 -91 806 539 Q 306 1169 306 2328 Q 306 3491 806 4120 Q 1306 4750 2228 4750 Q 3147 4750 3647 4120 Q 4147 3491 4147 2328 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-9" onclick="(()=&gt;{console.log('text 9 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(205.455661 289.031269) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-10" onclick="(()=&gt;{console.log('text 10 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(318.115269 306.990997) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-11" onclick="(()=&gt;{console.log('text 11 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(459.755142 293.508014) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-12" onclick="(()=&gt;{console.log('text 12 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(161.065175 271.9803) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-38"
d="M 2228 2088 Q 1891 2088 1709 1903 Q 1528 1719 1528 1375 Q 1528 1031 1709 848 Q 1891 666 2228 666 Q 2563 666 2741 848 Q 2919 1031 2919 1375 Q 2919 1722 2741 1905 Q 2563 2088 2228 2088 z M 1350 2484 Q 925 2613 709 2878 Q 494 3144 494 3541 Q 494 4131 934 4440 Q 1375 4750 2228 4750 Q 3075 4750 3515 4442 Q 3956 4134 3956 3541 Q 3956 3144 3739 2878 Q 3522 2613 3097 2484 Q 3572 2353 3814 2058 Q 4056 1763 4056 1313 Q 4056 619 3595 264 Q 3134 -91 2228 -91 Q 1319 -91 855 264 Q 391 619 391 1313 Q 391 1763 633 2058 Q 875 2353 1350 2484 z M 1631 3419 Q 1631 3141 1786 2991 Q 1941 2841 2228 2841 Q 2509 2841 2662 2991 Q 2816 3141 2816 3419 Q 2816 3697 2662 3845 Q 2509 3994 2228 3994 Q 1941 3994 1786 3844 Q 1631 3694 1631 3419 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-13" onclick="(()=&gt;{console.log('text 13 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(244.173583 110.918523) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-14" onclick="(()=&gt;{console.log('text 14 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(233.467625 161.664737) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-15" onclick="(()=&gt;{console.log('text 15 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(270.491369 193.884188) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-16" onclick="(()=&gt;{console.log('text 16 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(181.971765 226.625792) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-34"
d="M 2356 3675 L 1038 1722 L 2356 1722 L 2356 3675 z M 2156 4666 L 3494 4666 L 3494 1722 L 4159 1722 L 4159 850 L 3494 850 L 3494 0 L 2356 0 L 2356 850 L 288 850 L 288 1881 L 2156 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-17" onclick="(()=&gt;{console.log('text 17 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(225.063335 351.712921) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-37"
d="M 428 4666 L 3944 4666 L 3944 3988 L 2125 0 L 953 0 L 2675 3781 L 428 3781 L 428 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-18" onclick="(()=&gt;{console.log('text 18 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(113.946108 355.813803) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-19" onclick="(()=&gt;{console.log('text 19 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(150.275227 403.77299) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-20" onclick="(()=&gt;{console.log('text 20 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(206.056148 247.886269) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-21" onclick="(()=&gt;{console.log('text 21 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(256.219988 226.341346) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-22" onclick="(()=&gt;{console.log('text 22 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(212.447115 398.180721) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-23" onclick="(()=&gt;{console.log('text 23 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(335.953598 169.601466) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-24" onclick="(()=&gt;{console.log('text 24 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(232.971874 258.553808) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-25" onclick="(()=&gt;{console.log('text 25 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(248.771502 299.468132) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-26" onclick="(()=&gt;{console.log('text 26 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(199.213878 206.324585) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-27" onclick="(()=&gt;{console.log('text 27 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(444.964679 332.520349) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-28" onclick="(()=&gt;{console.log('text 28 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(341.774186 339.623355) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-29" onclick="(()=&gt;{console.log('text 29 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(278.831389 312.87527) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-30" onclick="(()=&gt;{console.log('text 30 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(279.080561 152.246589) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-31" onclick="(()=&gt;{console.log('text 31 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(273.529238 281.158194) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-32" onclick="(()=&gt;{console.log('text 32 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(292.28304 437.124218) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-33" onclick="(()=&gt;{console.log('text 33 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(207.847093 320.425118) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-34" onclick="(()=&gt;{console.log('text 34 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(411.155112 337.45314) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-35" onclick="(()=&gt;{console.log('text 35 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(312.721831 137.338276) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-36" onclick="(()=&gt;{console.log('text 36 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(358.165623 477.463977) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-37" onclick="(()=&gt;{console.log('text 37 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(200.10369 364.776639) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-38" onclick="(()=&gt;{console.log('text 38 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(228.300336 209.562933) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-39" onclick="(()=&gt;{console.log('text 39 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(290.459616 239.607741) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-40" onclick="(()=&gt;{console.log('text 40 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(173.595109 322.147003) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-41" onclick="(()=&gt;{console.log('text 41 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(358.784874 437.766204) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-42" onclick="(()=&gt;{console.log('text 42 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(413.927594 407.153606) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-43" onclick="(()=&gt;{console.log('text 43 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(312.741682 407.26454) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-44" onclick="(()=&gt;{console.log('text 44 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(154.095894 358.795699) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-45" onclick="(()=&gt;{console.log('text 45 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(332.723876 275.599102) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-46" onclick="(()=&gt;{console.log('text 46 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(380.950141 419.578314) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-47" onclick="(()=&gt;{console.log('text 47 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(205.582536 438.239079) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-48" onclick="(()=&gt;{console.log('text 48 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(423.537047 366.877303) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
<use xlink:href="#DejaVuSans-Bold-30" x="139.160156" />
</g>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="pd42c8a995e">
<rect x="85.985534" y="69.12" width="418.428931" height="443.52" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
client/demo/dist/assets/buymeacoffee.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

30
client/demo/dist/assets/gui_settings/GUI.json vendored
View File

@ -1,30 +0,0 @@
{
"type": "demo",
"id": "RVC",
"front": {
"modelSlotControl": [
{
"name": "headerArea",
"options": {
"mainTitle": "Realtime Voice Changer Client",
"subTitle": ""
}
},
{
"name": "modelSlotArea",
"options": {}
},
{
"name": "characterArea",
"options": {}
},
{
"name": "configArea",
"options": {
"detectors": ["dio", "harvest", "crepe", "crepe_full", "crepe_tiny", "rmvpe", "rmvpe_onnx", "fcpe"],
"inputChunkNums": [1, 2, 4, 6, 8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048, 4096, 8192, 16384]
}
}
]
}
}

30
client/demo/dist/assets/gui_settings/RVC.json vendored
View File

@ -1,30 +0,0 @@
{
"type": "demo",
"id": "RVC",
"front": {
"modelSlotControl": [
{
"name": "headerArea",
"options": {
"mainTitle": "Realtime Voice Changer Client",
"subTitle": "for RVC"
}
},
{
"name": "modelSlotArea",
"options": {}
},
{
"name": "characterArea",
"options": {}
},
{
"name": "configArea",
"options": {
"detectors": ["dio", "harvest", "crepe"],
"inputChunkNums": [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048]
}
}
]
}
}

0
client/demo/dist/assets/gui_settings/edition.txt vendored
View File

1
client/demo/dist/assets/gui_settings/edition_dml.txt vendored
View File

@ -1 +0,0 @@
onnxdirectML-cuda

1
client/demo/dist/assets/gui_settings/edition_web.txt vendored
View File

@ -1 +0,0 @@
web

1
client/demo/dist/assets/gui_settings/version.txt vendored
View File

@ -1 +0,0 @@
-.-.-.-

BIN
client/demo/dist/assets/icons/blank.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
client/demo/dist/assets/icons/file-text.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 473 B

BIN
client/demo/dist/assets/icons/flect.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

1
client/demo/dist/assets/icons/folder.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 311 B

1
client/demo/dist/assets/icons/github.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 522 B

1
client/demo/dist/assets/icons/help-circle.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 365 B

1
client/demo/dist/assets/icons/home.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 327 B

BIN
client/demo/dist/assets/icons/human.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

1
client/demo/dist/assets/icons/linkedin.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 395 B

BIN
client/demo/dist/assets/icons/noimage.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

1
client/demo/dist/assets/icons/tool.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 386 B

1
client/demo/dist/assets/icons/twitter.svg vendored
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 403 B

BIN
client/demo/dist/assets/icons/zun.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 KiB

BIN
client/demo/dist/favicon.ico vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

1
client/demo/dist/index.html vendored
View File

@ -1 +0,0 @@
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html>

2
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

35
client/demo/dist/index.js.LICENSE.txt vendored
View File

@ -1,35 +0,0 @@
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
/*!**********************!*\
!*** ./src/index.ts ***!
\**********************/
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

13330
client/demo/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

79
client/demo/package.json
View File

@ -1,79 +0,0 @@
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": ".eslintrc.js",
"scripts": {
"clean": "rimraf dist/",
"webpack:prod": "npx webpack --config webpack.prod.js",
"webpack:dev": "npx webpack --config webpack.dev.js",
"build:prod": "npm-run-all clean webpack:prod",
"build:dev": "npm-run-all clean webpack:dev",
"start": "webpack-dev-server --config webpack.dev.js",
"build:mod": "cd ../lib && npm run build:dev && cd - && cp -r ../lib/dist/* node_modules/@dannadori/voice-changer-client-js/dist/",
"build:mod_dos": "cd ../lib && npm run build:dev && cd ../demo && npm-run-all build:mod_copy",
"build:mod_copy": "XCOPY ..\\lib\\dist\\* .\\node_modules\\@dannadori\\voice-changer-client-js\\dist\\* /s /e /h /y",
"test": "echo \"Error: no test specified\" && exit 1",
"____ comment ____": "ウェブバージョンのスクリプト",
"clean:web": "rimraf dist_web/",
"webpack:web:prod": "npx webpack --config webpack_web.prod.js && copy .\\public\\info_web .\\dist_web\\info && copy .\\public\\assets\\gui_settings\\edition_web.txt .\\dist_web\\assets\\gui_settings\\edition.txt",
"webpack:web:dev": "npx webpack --config webpack_web.dev.js && copy .\\public\\info_web .\\dist_web\\info && copy .\\public\\assets\\gui_settings\\edition_web.txt .\\dist_web\\assets\\gui_settings\\edition.txt",
"build:web:prod": "npm-run-all clean:web webpack:web:prod",
"build:web:dev": "npm-run-all clean:web webpack:web:dev",
"start:web": "webpack-dev-server --config webpack_web.dev.js"
},
"keywords": [
"voice conversion"
],
"author": "wataru.okada@flect.co.jp",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/plugin-transform-runtime": "^7.24.0",
"@babel/preset-env": "^7.24.0",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@types/node": "^20.11.21",
"@types/react": "^18.2.60",
"@types/react-dom": "^18.2.19",
"autoprefixer": "^10.4.17",
"babel-loader": "^9.1.3",
"copy-webpack-plugin": "^12.0.2",
"css-loader": "^6.10.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.33.2",
"eslint-webpack-plugin": "^4.0.1",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0",
"npm-run-all": "^4.1.5",
"postcss-loader": "^8.1.1",
"postcss-nested": "^6.0.1",
"prettier": "^3.2.5",
"rimraf": "^5.0.5",
"style-loader": "^3.3.4",
"ts-loader": "^9.5.1",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.3.3",
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.2"
},
"dependencies": {
"@alexanderolsen/libsamplerate-js": "^2.1.1",
"@dannadori/voice-changer-client-js": "^1.0.182",
"@dannadori/voice-changer-js": "^1.0.2",
"@dannadori/worker-manager": "^1.0.20",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-brands-svg-icons": "^6.5.1",
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@tensorflow/tfjs": "^4.17.0",
"onnxruntime-web": "^1.17.1",
"protobufjs": "^7.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}

6
client/demo/postcss.config.js
View File

@ -1,6 +0,0 @@
module.exports = {
plugins: {
autoprefixer: {},
"postcss-nested": {},
},
};

928
client/demo/public/assets/beatrice/female-clickable.svg
View File

@ -1,928 +0,0 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:ns2="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="100 60 420 450" version="1.1">
<metadata>
<rdf:RDF>
<ns2:Work>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:date>2023-11-19T11:21:56.358384</dc:date>
<dc:format>image/svg+xml</dc:format>
<dc:creator>
<ns2:Agent>
<dc:title>Matplotlib v3.7.1, https://matplotlib.org/</dc:title>
</ns2:Agent>
</dc:creator>
</ns2:Work>
</rdf:RDF>
</metadata>
<defs>
<style type="text/css">
* {
stroke-linejoin: round;
stroke-linecap: butt
}
</style>
<style type="text/css">
.beatrice-node-pointer {
cursor: pointer;
}
.beatrice-node-pointer:hover {
stroke: gray;
}
.beatrice-node-pointer-selected {
stroke: #ef6767c2;
stroke-width: 3
}
.beatrice-text-pointer {
cursor: pointer;
pointer-events: none
}
.beatrice-text-pointer:hover {
/* ホバー時のスタイルは既に設定されたスタイルと異なる特定の属性を変更することができます。 */
}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 576 L 576 576 L 576 0 L 0 0 z " style="fill: #ffffff" />
</g>
<g id="axes_1">
<g id="LineCollection_1">
<path d="M 403.96157 149.258085 L 366.630583 148.159991 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 396.547407 371.476481 L 372.120414 365.421971 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 396.547407 371.476481 L 416.760989 346.999139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 396.547407 371.476481 L 404.238335 402.754731 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 258.035169 326.134244 L 298.859694 332.465911 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 167.453327 366.897955 L 203.987537 347.931194 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 436.352807 416.173738 L 404.238335 402.754731 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 391.514336 242.048236 L 417.560846 259.464346 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 391.514336 242.048236 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 391.514336 242.048236 L 424.070309 219.021704 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 205.541044 459.711101 L 230.303076 436.148139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 160.44225 292.540336 L 167.396334 325.961848 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.679012 107.607273 L 366.630583 148.159991 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 325.345004 219.195921 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 325.345004 219.195921 L 297.530501 194.55124 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 363.075301 201.701937 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 363.075301 201.701937 L 341.462109 170.414842 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 366.630583 148.159991 L 341.462109 170.414842 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 167.396334 325.961848 L 203.987537 347.931194 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 262.111309 181.887977 L 297.530501 194.55124 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 189.293496 262.735141 L 222.122563 261.416721 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 277.95603 462.622539 L 293.230217 421.393405 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 333.932593 269.342364 L 301.9174 258.124913 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 333.932593 269.342364 L 355.734145 235.68791 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 334.666605 338.097578 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 203.987537 347.931194 L 242.811958 354.082183 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 276.198518 388.99868 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 298.859694 332.465911 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 288.059985 363.924972 L 242.811958 354.082183 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 276.198518 388.99868 L 293.230217 421.393405 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 293.230217 421.393405 L 309.530924 454.827332 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 293.230217 421.393405 L 260.004712 426.426278 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 423.853712 378.321354 L 404.238335 402.754731 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 205.214352 217.066163 L 222.122563 261.416721 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 154.047193 423.153273 L 193.933786 408.004355 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 298.859694 332.465911 L 277.79477 306.980241 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 277.79477 306.980241 L 282.261978 282.779534 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 260.004712 426.426278 L 230.303076 436.148139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 260.004712 426.426278 L 228.689744 409.959215 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 260.004712 426.426278 L 261.506403 474.152727 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 301.9174 258.124913 L 282.261978 282.779534 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 254.897329 263.033159 L 282.261978 282.779534 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 254.897329 263.033159 L 222.122563 261.416721 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 321.267463 403.021207 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.750267 380.131711 L 320.07566 368.578481 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.750267 380.131711 L 372.120414 365.421971 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 345.750267 380.131711 L 351.226176 419.342667 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 404.238335 402.754731 L 400.607869 434.730447 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
<path d="M 193.933786 408.004355 L 230.303076 436.148139 " clip-path="url(#pe3de578e26)"
style="fill: none; stroke: #808080" />
</g>
<g id="PathCollection_1">
<defs>
<path id="C0_0_b0ffb3bf4a"
d="M 0 11.18034 C 2.965061 11.18034 5.80908 10.002309 7.905694 7.905694 C 10.002309 5.80908 11.18034 2.965061 11.18034 -0 C 11.18034 -2.965061 10.002309 -5.80908 7.905694 -7.905694 C 5.80908 -10.002309 2.965061 -11.18034 0 -11.18034 C -2.965061 -11.18034 -5.80908 -10.002309 -7.905694 -7.905694 C -10.002309 -5.80908 -11.18034 -2.965061 -11.18034 0 C -11.18034 2.965061 -10.002309 5.80908 -7.905694 7.905694 C -5.80908 10.002309 -2.965061 11.18034 0 11.18034 z " />
</defs>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-0"
onclick="(()=&gt;{console.log('node 0')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="403.96157" y="149.258085" style="fill: #e7f5d2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-1"
onclick="(()=&gt;{console.log('node 1')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="396.547407" y="371.476481" style="fill: #fbe8f2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-2"
onclick="(()=&gt;{console.log('node 2')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="258.035169" y="326.134244" style="fill: #cfebaa" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-3"
onclick="(()=&gt;{console.log('node 3')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="167.453327" y="366.897955" style="fill: #f1f6e8" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-4"
onclick="(()=&gt;{console.log('node 4')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="436.352807" y="416.173738" style="fill: #e89ac6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-5"
onclick="(()=&gt;{console.log('node 5')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="391.514336" y="242.048236" style="fill: #f3bcdd" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-6"
onclick="(()=&gt;{console.log('node 6')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="205.541044" y="459.711101" style="fill: #fbd9ec" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-7"
onclick="(()=&gt;{console.log('node 7')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="160.44225" y="292.540336" style="fill: #9ed067" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-8"
onclick="(()=&gt;{console.log('node 8')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="424.070309" y="219.021704" style="fill: #e1f3c7" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-9"
onclick="(()=&gt;{console.log('node 9')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="345.679012" y="107.607273" style="fill: #d0ecad" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-10"
onclick="(()=&gt;{console.log('node 10')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="325.345004" y="219.195921" style="fill: #eff6e4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-11"
onclick="(()=&gt;{console.log('node 11')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="363.075301" y="201.701937" style="fill: #f9f0f5" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-12"
onclick="(()=&gt;{console.log('node 12')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="366.630583" y="148.159991" style="fill: #ebf6dc" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-13"
onclick="(()=&gt;{console.log('node 13')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="341.462109" y="170.414842" style="fill: #fad6ea" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-14"
onclick="(()=&gt;{console.log('node 14')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="167.396334" y="325.961848" style="fill: #f5f7f3" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-15"
onclick="(()=&gt;{console.log('node 15')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="262.111309" y="181.887977" style="fill: #e9f5d6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-16"
onclick="(()=&gt;{console.log('node 16')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="189.293496" y="262.735141" style="fill: #fce5f1" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-17"
onclick="(()=&gt;{console.log('node 17')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="277.95603" y="462.622539" style="fill: #c4e699" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-18"
onclick="(()=&gt;{console.log('node 18')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="333.932593" y="269.342364" style="fill: #f8f4f6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-19"
onclick="(()=&gt;{console.log('node 19')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="416.760989" y="346.999139" style="fill: #eef6e2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-20"
onclick="(()=&gt;{console.log('node 20')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="334.666605" y="338.097578" style="fill: #f5f7f3" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-21"
onclick="(()=&gt;{console.log('node 21')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="203.987537" y="347.931194" style="fill: #edf6df" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-22"
onclick="(()=&gt;{console.log('node 22')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="288.059985" y="363.924972" style="fill: #ddf1c1" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-23"
onclick="(()=&gt;{console.log('node 23')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="276.198518" y="388.99868" style="fill: #f5f7f3" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-24"
onclick="(()=&gt;{console.log('node 24')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="293.230217" y="421.393405" style="fill: #f3f7ef" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-25"
onclick="(()=&gt;{console.log('node 25')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="423.853712" y="378.321354" style="fill: #edf6df" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-26"
onclick="(()=&gt;{console.log('node 26')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="205.214352" y="217.066163" style="fill: #e7f5d2" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-27"
onclick="(()=&gt;{console.log('node 27')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="242.811958" y="354.082183" style="fill: #d2ecb0" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-28"
onclick="(()=&gt;{console.log('node 28')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="154.047193" y="423.153273" style="fill: #e6f5d0" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-29"
onclick="(()=&gt;{console.log('node 29')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="298.859694" y="332.465911" style="fill: #ecf6de" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-30"
onclick="(()=&gt;{console.log('node 30')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="277.79477" y="306.980241" style="fill: #eaf5d9" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-31"
onclick="(()=&gt;{console.log('node 31')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="260.004712" y="426.426278" style="fill: #f9f1f5" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-32"
onclick="(()=&gt;{console.log('node 32')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="301.9174" y="258.124913" style="fill: #dbf0bf" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-33"
onclick="(()=&gt;{console.log('node 33')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="254.897329" y="263.033159" style="fill: #eff6e4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-34"
onclick="(()=&gt;{console.log('node 34')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="321.267463" y="403.021207" style="fill: #d0ecad" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-35"
onclick="(()=&gt;{console.log('node 35')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="345.750267" y="380.131711" style="fill: #f9eef4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-36"
onclick="(()=&gt;{console.log('node 36')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="404.238335" y="402.754731" style="fill: #f9eef4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-37"
onclick="(()=&gt;{console.log('node 37')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="355.734145" y="235.68791" style="fill: #f9eef4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-38"
onclick="(()=&gt;{console.log('node 38')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="193.933786" y="408.004355" style="fill: #f0f6e7" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-39"
onclick="(()=&gt;{console.log('node 39')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="297.530501" y="194.55124" style="fill: #f3f6ed" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-40"
onclick="(()=&gt;{console.log('node 40')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="320.07566" y="368.578481" style="fill: #dbf0bf" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-41"
onclick="(()=&gt;{console.log('node 41')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="228.689744" y="409.959215" style="fill: #f9eff4" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-42"
onclick="(()=&gt;{console.log('node 42')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="351.226176" y="419.342667" style="fill: #cfebaa" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-43"
onclick="(()=&gt;{console.log('node 43')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="372.120414" y="365.421971" style="fill: #f7f6f7" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-44"
onclick="(()=&gt;{console.log('node 44')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="230.303076" y="436.148139" style="fill: #f8cee6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-45"
onclick="(()=&gt;{console.log('node 45')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="261.506403" y="474.152727" style="fill: #e6f5d0" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-46"
onclick="(()=&gt;{console.log('node 46')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="417.560846" y="259.464346" style="fill: #b7e085" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-47"
onclick="(()=&gt;{console.log('node 47')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="400.607869" y="434.730447" style="fill: #f8cee6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-48"
onclick="(()=&gt;{console.log('node 48')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="282.261978" y="282.779534" style="fill: #d6eeb6" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-49"
onclick="(()=&gt;{console.log('node 49')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="222.122563" y="261.416721" style="fill: #edf6df" />
</g>
<g clip-path="url(#pe3de578e26)" id="beatrice-node-female-50"
onclick="(()=&gt;{console.log('node 50')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_b0ffb3bf4a" x="309.530924" y="454.827332" style="fill: #f9eef4" />
</g>
</g>
<g id="beatrice-text-female-0" onclick="(()=&gt;{console.log('text 0 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(399.786883 152.569335) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-32"
d="M 1844 884 L 3897 884 L 3897 0 L 506 0 L 506 884 L 2209 2388 Q 2438 2594 2547 2791 Q 2656 2988 2656 3200 Q 2656 3528 2436 3728 Q 2216 3928 1850 3928 Q 1569 3928 1234 3808 Q 900 3688 519 3450 L 519 4475 Q 925 4609 1322 4679 Q 1719 4750 2100 4750 Q 2938 4750 3402 4381 Q 3866 4013 3866 3353 Q 3866 2972 3669 2642 Q 3472 2313 2841 1759 L 1844 884 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-32" />
</g>
</g>
</g>
<g id="beatrice-text-female-1" onclick="(()=&gt;{console.log('text 1 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(392.37272 374.787731) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-34"
d="M 2356 3675 L 1038 1722 L 2356 1722 L 2356 3675 z M 2156 4666 L 3494 4666 L 3494 1722 L 4159 1722 L 4159 850 L 3494 850 L 3494 0 L 2356 0 L 2356 850 L 288 850 L 288 1881 L 2156 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-34" />
</g>
</g>
</g>
<g id="beatrice-text-female-2" onclick="(()=&gt;{console.log('text 2 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(253.860482 329.445494) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-37"
d="M 428 4666 L 3944 4666 L 3944 3988 L 2125 0 L 953 0 L 2675 3781 L 428 3781 L 428 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-37" />
</g>
</g>
</g>
<g id="beatrice-text-female-3" onclick="(()=&gt;{console.log('text 3 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(163.27864 370.209205) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-38"
d="M 2228 2088 Q 1891 2088 1709 1903 Q 1528 1719 1528 1375 Q 1528 1031 1709 848 Q 1891 666 2228 666 Q 2563 666 2741 848 Q 2919 1031 2919 1375 Q 2919 1722 2741 1905 Q 2563 2088 2228 2088 z M 1350 2484 Q 925 2613 709 2878 Q 494 3144 494 3541 Q 494 4131 934 4440 Q 1375 4750 2228 4750 Q 3075 4750 3515 4442 Q 3956 4134 3956 3541 Q 3956 3144 3739 2878 Q 3522 2613 3097 2484 Q 3572 2353 3814 2058 Q 4056 1763 4056 1313 Q 4056 619 3595 264 Q 3134 -91 2228 -91 Q 1319 -91 855 264 Q 391 619 391 1313 Q 391 1763 633 2058 Q 875 2353 1350 2484 z M 1631 3419 Q 1631 3141 1786 2991 Q 1941 2841 2228 2841 Q 2509 2841 2662 2991 Q 2816 3141 2816 3419 Q 2816 3697 2662 3845 Q 2509 3994 2228 3994 Q 1941 3994 1786 3844 Q 1631 3694 1631 3419 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-38" />
</g>
</g>
</g>
<g id="beatrice-text-female-4" onclick="(()=&gt;{console.log('text 4 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(428.003432 419.484988) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-31"
d="M 750 831 L 1813 831 L 1813 3847 L 722 3622 L 722 4441 L 1806 4666 L 2950 4666 L 2950 831 L 4013 831 L 4013 0 L 750 0 L 750 831 z "
transform="scale(0.015625)" />
<path id="DejaVuSans-Bold-30"
d="M 2944 2338 Q 2944 3213 2780 3570 Q 2616 3928 2228 3928 Q 1841 3928 1675 3570 Q 1509 3213 1509 2338 Q 1509 1453 1675 1090 Q 1841 728 2228 728 Q 2613 728 2778 1090 Q 2944 1453 2944 2338 z M 4147 2328 Q 4147 1169 3647 539 Q 3147 -91 2228 -91 Q 1306 -91 806 539 Q 306 1169 306 2328 Q 306 3491 806 4120 Q 1306 4750 2228 4750 Q 3147 4750 3647 4120 Q 4147 3491 4147 2328 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-5" onclick="(()=&gt;{console.log('text 5 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(383.164961 245.359486) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-6" onclick="(()=&gt;{console.log('text 6 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(197.191669 463.022351) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-35"
d="M 678 4666 L 3669 4666 L 3669 3781 L 1638 3781 L 1638 3059 Q 1775 3097 1914 3117 Q 2053 3138 2203 3138 Q 3056 3138 3531 2711 Q 4006 2284 4006 1522 Q 4006 766 3489 337 Q 2972 -91 2053 -91 Q 1656 -91 1267 -14 Q 878 63 494 219 L 494 1166 Q 875 947 1217 837 Q 1559 728 1863 728 Q 2300 728 2551 942 Q 2803 1156 2803 1522 Q 2803 1891 2551 2103 Q 2300 2316 1863 2316 Q 1603 2316 1309 2248 Q 1016 2181 678 2041 L 678 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-7" onclick="(()=&gt;{console.log('text 7 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(152.092875 295.851586) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-36"
d="M 2316 2303 Q 2000 2303 1842 2098 Q 1684 1894 1684 1484 Q 1684 1075 1842 870 Q 2000 666 2316 666 Q 2634 666 2792 870 Q 2950 1075 2950 1484 Q 2950 1894 2792 2098 Q 2634 2303 2316 2303 z M 3803 4544 L 3803 3681 Q 3506 3822 3243 3889 Q 2981 3956 2731 3956 Q 2194 3956 1894 3657 Q 1594 3359 1544 2772 Q 1750 2925 1990 3001 Q 2231 3078 2516 3078 Q 3231 3078 3670 2659 Q 4109 2241 4109 1563 Q 4109 813 3618 361 Q 3128 -91 2303 -91 Q 1394 -91 895 523 Q 397 1138 397 2266 Q 397 3422 980 4083 Q 1563 4744 2578 4744 Q 2900 4744 3203 4694 Q 3506 4644 3803 4544 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-8" onclick="(()=&gt;{console.log('text 8 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(415.720934 222.332954) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-9" onclick="(()=&gt;{console.log('text 9 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(337.329637 110.918523) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-10" onclick="(()=&gt;{console.log('text 10 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(316.995629 222.507171) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-39"
d="M 641 103 L 641 966 Q 928 831 1190 764 Q 1453 697 1709 697 Q 2247 697 2547 995 Q 2847 1294 2900 1881 Q 2688 1725 2447 1647 Q 2206 1569 1925 1569 Q 1209 1569 770 1986 Q 331 2403 331 3084 Q 331 3838 820 4291 Q 1309 4744 2131 4744 Q 3044 4744 3544 4128 Q 4044 3513 4044 2388 Q 4044 1231 3459 570 Q 2875 -91 1856 -91 Q 1528 -91 1228 -42 Q 928 6 641 103 z M 2125 2350 Q 2441 2350 2600 2554 Q 2759 2759 2759 3169 Q 2759 3575 2600 3781 Q 2441 3988 2125 3988 Q 1809 3988 1650 3781 Q 1491 3575 1491 3169 Q 1491 2759 1650 2554 Q 1809 2350 2125 2350 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-11" onclick="(()=&gt;{console.log('text 11 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(354.725926 205.013187) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-12" onclick="(()=&gt;{console.log('text 12 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(358.281208 151.471241) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-13" onclick="(()=&gt;{console.log('text 13 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(333.112734 173.726092) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-14" onclick="(()=&gt;{console.log('text 14 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(159.046959 329.273098) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-15" onclick="(()=&gt;{console.log('text 15 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(253.761934 185.199227) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-16" onclick="(()=&gt;{console.log('text 16 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(180.944121 266.046391) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-33"
d="M 2981 2516 Q 3453 2394 3698 2092 Q 3944 1791 3944 1325 Q 3944 631 3412 270 Q 2881 -91 1863 -91 Q 1503 -91 1142 -33 Q 781 25 428 141 L 428 1069 Q 766 900 1098 814 Q 1431 728 1753 728 Q 2231 728 2486 893 Q 2741 1059 2741 1369 Q 2741 1688 2480 1852 Q 2219 2016 1709 2016 L 1228 2016 L 1228 2791 L 1734 2791 Q 2188 2791 2409 2933 Q 2631 3075 2631 3366 Q 2631 3634 2415 3781 Q 2200 3928 1806 3928 Q 1516 3928 1219 3862 Q 922 3797 628 3669 L 628 4550 Q 984 4650 1334 4700 Q 1684 4750 2022 4750 Q 2931 4750 3382 4451 Q 3834 4153 3834 3553 Q 3834 3144 3618 2883 Q 3403 2622 2981 2516 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-17" onclick="(()=&gt;{console.log('text 17 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(269.606655 465.933789) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-18" onclick="(()=&gt;{console.log('text 18 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(325.583218 272.653614) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-19" onclick="(()=&gt;{console.log('text 19 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(408.411614 350.310389) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-20" onclick="(()=&gt;{console.log('text 20 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(326.31723 341.408828) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-21" onclick="(()=&gt;{console.log('text 21 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(195.638162 351.242444) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-22" onclick="(()=&gt;{console.log('text 22 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(279.71061 367.236222) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-23" onclick="(()=&gt;{console.log('text 23 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(267.849143 392.30993) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-24" onclick="(()=&gt;{console.log('text 24 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(284.880842 424.704655) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-25" onclick="(()=&gt;{console.log('text 25 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(415.504337 381.632604) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-26" onclick="(()=&gt;{console.log('text 26 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(196.864977 220.377413) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-27" onclick="(()=&gt;{console.log('text 27 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(234.462583 357.393433) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-28" onclick="(()=&gt;{console.log('text 28 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(145.697818 426.464523) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-29" onclick="(()=&gt;{console.log('text 29 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(290.510319 335.777161) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-30" onclick="(()=&gt;{console.log('text 30 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(269.445395 310.291491) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-31" onclick="(()=&gt;{console.log('text 31 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(251.655337 429.737528) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-32" onclick="(()=&gt;{console.log('text 32 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(293.568025 261.436163) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-33" onclick="(()=&gt;{console.log('text 33 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(246.547954 266.344409) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-34" onclick="(()=&gt;{console.log('text 34 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(312.918088 406.332457) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-35" onclick="(()=&gt;{console.log('text 35 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(337.400892 383.442961) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-36" onclick="(()=&gt;{console.log('text 36 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(395.88896 406.065981) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-37" onclick="(()=&gt;{console.log('text 37 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(347.38477 238.99916) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-38" onclick="(()=&gt;{console.log('text 38 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(185.584411 411.315605) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-39" onclick="(()=&gt;{console.log('text 39 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(289.181126 197.86249) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-40" onclick="(()=&gt;{console.log('text 40 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(311.726285 371.889731) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-41" onclick="(()=&gt;{console.log('text 41 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(220.340369 413.270465) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-42" onclick="(()=&gt;{console.log('text 42 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(342.876801 422.653917) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-43" onclick="(()=&gt;{console.log('text 43 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(363.771039 368.733221) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-44" onclick="(()=&gt;{console.log('text 44 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(221.953701 439.459389) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-45" onclick="(()=&gt;{console.log('text 45 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(253.157028 477.463977) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-46" onclick="(()=&gt;{console.log('text 46 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(409.211471 262.775596) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-47" onclick="(()=&gt;{console.log('text 47 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(392.258494 438.041697) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-48" onclick="(()=&gt;{console.log('text 48 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(273.912603 286.090784) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-49" onclick="(()=&gt;{console.log('text 49 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(213.773188 264.727971) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-female-50" onclick="(()=&gt;{console.log('text 50 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pe3de578e26)">
<g transform="translate(301.181549 458.138582) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="pe3de578e26">
<rect x="124.405104" y="69.12" width="341.589792" height="443.52" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

898
client/demo/public/assets/beatrice/male-clickable.svg
View File

@ -1,898 +0,0 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:ns2="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="100 60 420 450" version="1.1">
<metadata>
<rdf:RDF>
<ns2:Work>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:date>2023-11-19T11:21:55.705408</dc:date>
<dc:format>image/svg+xml</dc:format>
<dc:creator>
<ns2:Agent>
<dc:title>Matplotlib v3.7.1, https://matplotlib.org/</dc:title>
</ns2:Agent>
</dc:creator>
</ns2:Work>
</rdf:RDF>
</metadata>
<defs>
<style type="text/css">
* {
stroke-linejoin: round;
stroke-linecap: butt
}
</style>
<style type="text/css">
.beatrice-node-pointer {
cursor: pointer;
}
.beatrice-node-pointer:hover {
stroke: gray;
}
.beatrice-node-pointer-selected {
stroke: #ef6767c2;
stroke-width: 3
}
.beatrice-text-pointer {
cursor: pointer;
pointer-events: none
}
.beatrice-text-pointer:hover {
/* ホバー時のスタイルは既に設定されたスタイルと異なる特定の属性を変更することができます。 */
}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 576 L 576 576 L 576 0 L 0 0 z " style="fill: #ffffff" />
</g>
<g id="axes_1">
<g id="LineCollection_1">
<path d="M 383.475478 335.382791 L 350.123561 336.312105 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 383.475478 335.382791 L 393.562573 295.917472 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 383.475478 335.382791 L 396.396073 371.656412 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 395.592267 184.349842 L 344.302973 166.290216 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 166.614267 246.553188 L 214.405523 244.575019 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 389.299516 416.267064 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 367.134249 434.454954 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 396.396073 371.656412 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 362.886037 395.352171 L 321.091057 403.95329 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 291.699254 114.456198 L 287.429936 148.935339 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 309.72476 346.813492 L 326.464644 303.679747 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 396.396073 371.656412 L 422.276969 403.842356 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 396.396073 371.656412 L 419.504487 334.14189 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 311.713 188.802087 L 278.840744 190.572938 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 311.713 188.802087 L 287.429936 148.935339 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 311.713 188.802087 L 344.302973 166.290216 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 213.805036 285.720019 L 216.196468 317.113868 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 213.805036 285.720019 L 241.321249 255.242558 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 213.805036 285.720019 L 169.41455 268.66905 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 326.464644 303.679747 L 341.073251 272.287852 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 326.464644 303.679747 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 326.464644 303.679747 L 350.123561 336.312105 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 468.104517 290.196764 L 453.314054 329.209099 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 252.522958 107.607273 L 287.429936 148.935339 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 241.817 158.353487 L 278.840744 190.572938 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 278.840744 190.572938 L 264.569363 223.030096 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 190.32114 223.314542 L 214.405523 244.575019 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 233.41271 348.401671 L 216.196468 317.113868 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 122.295483 352.502553 L 162.445269 355.484449 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 158.624602 400.46174 L 162.445269 355.484449 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 214.405523 244.575019 L 241.321249 255.242558 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 214.405523 244.575019 L 207.563253 203.013335 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 264.569363 223.030096 L 298.808991 236.296491 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 264.569363 223.030096 L 241.321249 255.242558 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 264.569363 223.030096 L 236.649711 206.251683 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 220.79649 394.869471 L 213.931911 434.927829 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 220.79649 394.869471 L 208.453065 361.465389 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 241.321249 255.242558 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 257.120877 296.156882 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 453.314054 329.209099 L 419.504487 334.14189 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 287.180764 309.56402 L 281.878613 277.846944 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 287.429936 148.935339 L 321.071206 134.027026 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 300.632415 433.812968 L 321.091057 403.95329 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 216.196468 317.113868 L 181.944484 318.835753 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 216.196468 317.113868 L 208.453065 361.465389 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 419.504487 334.14189 L 436.061109 363.566053 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 366.514998 474.152727 L 367.134249 434.454954 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
<path d="M 208.453065 361.465389 L 162.445269 355.484449 " clip-path="url(#pd42c8a995e)"
style="fill: none; stroke: #808080" />
</g>
<g id="PathCollection_1">
<defs>
<path id="C0_0_3858269516"
d="M 0 11.18034 C 2.965061 11.18034 5.80908 10.002309 7.905694 7.905694 C 10.002309 5.80908 11.18034 2.965061 11.18034 -0 C 11.18034 -2.965061 10.002309 -5.80908 7.905694 -7.905694 C 5.80908 -10.002309 2.965061 -11.18034 0 -11.18034 C -2.965061 -11.18034 -5.80908 -10.002309 -7.905694 -7.905694 C -10.002309 -5.80908 -11.18034 -2.965061 -11.18034 0 C -11.18034 2.965061 -10.002309 5.80908 -7.905694 7.905694 C -5.80908 10.002309 -2.965061 11.18034 0 11.18034 z " />
</defs>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-0" onclick="(()=&gt;{console.log('node 0')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="383.475478" y="335.382791" style="fill: #fde2bb" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-1" onclick="(()=&gt;{console.log('node 1')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="393.562573" y="295.917472" style="fill: #fdba68" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-2" onclick="(()=&gt;{console.log('node 2')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="395.592267" y="184.349842" style="fill: #fbe9cf" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-3" onclick="(()=&gt;{console.log('node 3')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="166.614267" y="246.553188" style="fill: #7e70ab" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-4" onclick="(()=&gt;{console.log('node 4')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="362.886037" y="395.352171" style="fill: #e8e9f1" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-5" onclick="(()=&gt;{console.log('node 5')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="291.699254" y="114.456198" style="fill: #f9b158" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-6" onclick="(()=&gt;{console.log('node 6')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="309.72476" y="346.813492" style="fill: #e4e5f0" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-7" onclick="(()=&gt;{console.log('node 7')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="396.396073" y="371.656412" style="fill: #fdcc8c" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-8" onclick="(()=&gt;{console.log('node 8')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="311.713" y="188.802087" style="fill: #fedeb3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-9" onclick="(()=&gt;{console.log('node 9')})()"
class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="213.805036" y="285.720019" style="fill: #bab5d7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-10"
onclick="(()=&gt;{console.log('node 10')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="326.464644" y="303.679747" style="fill: #eaebf2" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-11"
onclick="(()=&gt;{console.log('node 11')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="468.104517" y="290.196764" style="fill: #f7f7f6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-12"
onclick="(()=&gt;{console.log('node 12')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="169.41455" y="268.66905" style="fill: #dfe1ee" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-13"
onclick="(()=&gt;{console.log('node 13')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="252.522958" y="107.607273" style="fill: #eff0f4" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-14"
onclick="(()=&gt;{console.log('node 14')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="241.817" y="158.353487" style="fill: #e58a20" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-15"
onclick="(()=&gt;{console.log('node 15')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="278.840744" y="190.572938" style="fill: #fedbac" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-16"
onclick="(()=&gt;{console.log('node 16')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="190.32114" y="223.314542" style="fill: #dfe1ee" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-17"
onclick="(()=&gt;{console.log('node 17')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="233.41271" y="348.401671" style="fill: #c3c0dd" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-18"
onclick="(()=&gt;{console.log('node 18')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="122.295483" y="352.502553" style="fill: #fed8a6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-19"
onclick="(()=&gt;{console.log('node 19')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="158.624602" y="400.46174" style="fill: #f7f6f3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-20"
onclick="(()=&gt;{console.log('node 20')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="214.405523" y="244.575019" style="fill: #f9f2e9" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-21"
onclick="(()=&gt;{console.log('node 21')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="264.569363" y="223.030096" style="fill: #faecd7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-22"
onclick="(()=&gt;{console.log('node 22')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="220.79649" y="394.869471" style="fill: #fbead2" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-23"
onclick="(()=&gt;{console.log('node 23')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="344.302973" y="166.290216" style="fill: #feddaf" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-24"
onclick="(()=&gt;{console.log('node 24')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="241.321249" y="255.242558" style="fill: #c3c0dd" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-25"
onclick="(()=&gt;{console.log('node 25')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="257.120877" y="296.156882" style="fill: #f9f0e4" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-26"
onclick="(()=&gt;{console.log('node 26')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="207.563253" y="203.013335" style="fill: #fbebd5" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-27"
onclick="(()=&gt;{console.log('node 27')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="453.314054" y="329.209099" style="fill: #fdc47b" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-28"
onclick="(()=&gt;{console.log('node 28')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="350.123561" y="336.312105" style="fill: #fbe9cf" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-29"
onclick="(()=&gt;{console.log('node 29')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="287.180764" y="309.56402" style="fill: #f7f6f3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-30"
onclick="(()=&gt;{console.log('node 30')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="287.429936" y="148.935339" style="fill: #fbebd5" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-31"
onclick="(()=&gt;{console.log('node 31')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="281.878613" y="277.846944" style="fill: #d1d1e6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-32"
onclick="(()=&gt;{console.log('node 32')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="300.632415" y="433.812968" style="fill: #fde2bb" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-33"
onclick="(()=&gt;{console.log('node 33')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="216.196468" y="317.113868" style="fill: #dddfed" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-34"
onclick="(()=&gt;{console.log('node 34')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="419.504487" y="334.14189" style="fill: #fdc57f" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-35"
onclick="(()=&gt;{console.log('node 35')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="321.071206" y="134.027026" style="fill: #fee0b6" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-36"
onclick="(()=&gt;{console.log('node 36')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="366.514998" y="474.152727" style="fill: #fdbd6e" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-37"
onclick="(()=&gt;{console.log('node 37')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="208.453065" y="361.465389" style="fill: #cccbe3" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-38"
onclick="(()=&gt;{console.log('node 38')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="236.649711" y="206.251683" style="fill: #faecd7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-39"
onclick="(()=&gt;{console.log('node 39')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="298.808991" y="236.296491" style="fill: #fdc57f" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-40"
onclick="(()=&gt;{console.log('node 40')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="181.944484" y="318.835753" style="fill: #f9f0e4" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-41"
onclick="(()=&gt;{console.log('node 41')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="367.134249" y="434.454954" style="fill: #f6f6f7" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-42"
onclick="(()=&gt;{console.log('node 42')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="422.276969" y="403.842356" style="fill: #fdbf72" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-43"
onclick="(()=&gt;{console.log('node 43')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="321.091057" y="403.95329" style="fill: #f8f5f1" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-44"
onclick="(()=&gt;{console.log('node 44')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="162.445269" y="355.484449" style="fill: #eaebf2" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-45"
onclick="(()=&gt;{console.log('node 45')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="341.073251" y="272.287852" style="fill: #f6aa4f" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-46"
onclick="(()=&gt;{console.log('node 46')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="389.299516" y="416.267064" style="fill: #de8013" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-47"
onclick="(()=&gt;{console.log('node 47')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="213.931911" y="434.927829" style="fill: #fbb55e" />
</g>
<g clip-path="url(#pd42c8a995e)" id="beatrice-node-male-48"
onclick="(()=&gt;{console.log('node 48')})()" class="beatrice-node-pointer">
<use xlink:href="#C0_0_3858269516" x="436.061109" y="363.566053" style="fill: #ebecf3" />
</g>
</g>
<g id="beatrice-text-male-0" onclick="(()=&gt;{console.log('text 0 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(379.30079 338.694041) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-31"
d="M 750 831 L 1813 831 L 1813 3847 L 722 3622 L 722 4441 L 1806 4666 L 2950 4666 L 2950 831 L 4013 831 L 4013 0 L 750 0 L 750 831 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
</g>
</g>
</g>
<g id="beatrice-text-male-1" onclick="(()=&gt;{console.log('text 1 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(389.387885 299.228722) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-33"
d="M 2981 2516 Q 3453 2394 3698 2092 Q 3944 1791 3944 1325 Q 3944 631 3412 270 Q 2881 -91 1863 -91 Q 1503 -91 1142 -33 Q 781 25 428 141 L 428 1069 Q 766 900 1098 814 Q 1431 728 1753 728 Q 2231 728 2486 893 Q 2741 1059 2741 1369 Q 2741 1688 2480 1852 Q 2219 2016 1709 2016 L 1228 2016 L 1228 2791 L 1734 2791 Q 2188 2791 2409 2933 Q 2631 3075 2631 3366 Q 2631 3634 2415 3781 Q 2200 3928 1806 3928 Q 1516 3928 1219 3862 Q 922 3797 628 3669 L 628 4550 Q 984 4650 1334 4700 Q 1684 4750 2022 4750 Q 2931 4750 3382 4451 Q 3834 4153 3834 3553 Q 3834 3144 3618 2883 Q 3403 2622 2981 2516 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
</g>
</g>
</g>
<g id="beatrice-text-male-2" onclick="(()=&gt;{console.log('text 2 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(391.41758 187.661092) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-35"
d="M 678 4666 L 3669 4666 L 3669 3781 L 1638 3781 L 1638 3059 Q 1775 3097 1914 3117 Q 2053 3138 2203 3138 Q 3056 3138 3531 2711 Q 4006 2284 4006 1522 Q 4006 766 3489 337 Q 2972 -91 2053 -91 Q 1656 -91 1267 -14 Q 878 63 494 219 L 494 1166 Q 875 947 1217 837 Q 1559 728 1863 728 Q 2300 728 2551 942 Q 2803 1156 2803 1522 Q 2803 1891 2551 2103 Q 2300 2316 1863 2316 Q 1603 2316 1309 2248 Q 1016 2181 678 2041 L 678 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-35" />
</g>
</g>
</g>
<g id="beatrice-text-male-3" onclick="(()=&gt;{console.log('text 3 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(162.43958 249.864438) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-36"
d="M 2316 2303 Q 2000 2303 1842 2098 Q 1684 1894 1684 1484 Q 1684 1075 1842 870 Q 2000 666 2316 666 Q 2634 666 2792 870 Q 2950 1075 2950 1484 Q 2950 1894 2792 2098 Q 2634 2303 2316 2303 z M 3803 4544 L 3803 3681 Q 3506 3822 3243 3889 Q 2981 3956 2731 3956 Q 2194 3956 1894 3657 Q 1594 3359 1544 2772 Q 1750 2925 1990 3001 Q 2231 3078 2516 3078 Q 3231 3078 3670 2659 Q 4109 2241 4109 1563 Q 4109 813 3618 361 Q 3128 -91 2303 -91 Q 1394 -91 895 523 Q 397 1138 397 2266 Q 397 3422 980 4083 Q 1563 4744 2578 4744 Q 2900 4744 3203 4694 Q 3506 4644 3803 4544 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-36" />
</g>
</g>
</g>
<g id="beatrice-text-male-4" onclick="(()=&gt;{console.log('text 4 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(358.71135 398.663421) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-39"
d="M 641 103 L 641 966 Q 928 831 1190 764 Q 1453 697 1709 697 Q 2247 697 2547 995 Q 2847 1294 2900 1881 Q 2688 1725 2447 1647 Q 2206 1569 1925 1569 Q 1209 1569 770 1986 Q 331 2403 331 3084 Q 331 3838 820 4291 Q 1309 4744 2131 4744 Q 3044 4744 3544 4128 Q 4044 3513 4044 2388 Q 4044 1231 3459 570 Q 2875 -91 1856 -91 Q 1528 -91 1228 -42 Q 928 6 641 103 z M 2125 2350 Q 2441 2350 2600 2554 Q 2759 2759 2759 3169 Q 2759 3575 2600 3781 Q 2441 3988 2125 3988 Q 1809 3988 1650 3781 Q 1491 3575 1491 3169 Q 1491 2759 1650 2554 Q 1809 2350 2125 2350 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-39" />
</g>
</g>
</g>
<g id="beatrice-text-male-5" onclick="(()=&gt;{console.log('text 5 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(283.349879 117.767448) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-6" onclick="(()=&gt;{console.log('text 6 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(301.375385 350.124742) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-32"
d="M 1844 884 L 3897 884 L 3897 0 L 506 0 L 506 884 L 2209 2388 Q 2438 2594 2547 2791 Q 2656 2988 2656 3200 Q 2656 3528 2436 3728 Q 2216 3928 1850 3928 Q 1569 3928 1234 3808 Q 900 3688 519 3450 L 519 4475 Q 925 4609 1322 4679 Q 1719 4750 2100 4750 Q 2938 4750 3402 4381 Q 3866 4013 3866 3353 Q 3866 2972 3669 2642 Q 3472 2313 2841 1759 L 1844 884 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-7" onclick="(()=&gt;{console.log('text 7 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(388.046698 374.967662) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-8" onclick="(()=&gt;{console.log('text 8 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(303.363625 192.113337) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-30"
d="M 2944 2338 Q 2944 3213 2780 3570 Q 2616 3928 2228 3928 Q 1841 3928 1675 3570 Q 1509 3213 1509 2338 Q 1509 1453 1675 1090 Q 1841 728 2228 728 Q 2613 728 2778 1090 Q 2944 1453 2944 2338 z M 4147 2328 Q 4147 1169 3647 539 Q 3147 -91 2228 -91 Q 1306 -91 806 539 Q 306 1169 306 2328 Q 306 3491 806 4120 Q 1306 4750 2228 4750 Q 3147 4750 3647 4120 Q 4147 3491 4147 2328 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-9" onclick="(()=&gt;{console.log('text 9 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(205.455661 289.031269) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-10" onclick="(()=&gt;{console.log('text 10 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(318.115269 306.990997) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-11" onclick="(()=&gt;{console.log('text 11 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(459.755142 293.508014) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-12" onclick="(()=&gt;{console.log('text 12 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(161.065175 271.9803) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-38"
d="M 2228 2088 Q 1891 2088 1709 1903 Q 1528 1719 1528 1375 Q 1528 1031 1709 848 Q 1891 666 2228 666 Q 2563 666 2741 848 Q 2919 1031 2919 1375 Q 2919 1722 2741 1905 Q 2563 2088 2228 2088 z M 1350 2484 Q 925 2613 709 2878 Q 494 3144 494 3541 Q 494 4131 934 4440 Q 1375 4750 2228 4750 Q 3075 4750 3515 4442 Q 3956 4134 3956 3541 Q 3956 3144 3739 2878 Q 3522 2613 3097 2484 Q 3572 2353 3814 2058 Q 4056 1763 4056 1313 Q 4056 619 3595 264 Q 3134 -91 2228 -91 Q 1319 -91 855 264 Q 391 619 391 1313 Q 391 1763 633 2058 Q 875 2353 1350 2484 z M 1631 3419 Q 1631 3141 1786 2991 Q 1941 2841 2228 2841 Q 2509 2841 2662 2991 Q 2816 3141 2816 3419 Q 2816 3697 2662 3845 Q 2509 3994 2228 3994 Q 1941 3994 1786 3844 Q 1631 3694 1631 3419 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-32" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-13" onclick="(()=&gt;{console.log('text 13 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(244.173583 110.918523) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-14" onclick="(()=&gt;{console.log('text 14 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(233.467625 161.664737) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-15" onclick="(()=&gt;{console.log('text 15 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(270.491369 193.884188) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-16" onclick="(()=&gt;{console.log('text 16 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(181.971765 226.625792) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-34"
d="M 2356 3675 L 1038 1722 L 2356 1722 L 2356 3675 z M 2156 4666 L 3494 4666 L 3494 1722 L 4159 1722 L 4159 850 L 3494 850 L 3494 0 L 2356 0 L 2356 850 L 288 850 L 288 1881 L 2156 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-17" onclick="(()=&gt;{console.log('text 17 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(225.063335 351.712921) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-Bold-37"
d="M 428 4666 L 3944 4666 L 3944 3988 L 2125 0 L 953 0 L 2675 3781 L 428 3781 L 428 4666 z "
transform="scale(0.015625)" />
</defs>
<use xlink:href="#DejaVuSans-Bold-33" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-18" onclick="(()=&gt;{console.log('text 18 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(113.946108 355.813803) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-19" onclick="(()=&gt;{console.log('text 19 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(150.275227 403.77299) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-20" onclick="(()=&gt;{console.log('text 20 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(206.056148 247.886269) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-21" onclick="(()=&gt;{console.log('text 21 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(256.219988 226.341346) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-22" onclick="(()=&gt;{console.log('text 22 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(212.447115 398.180721) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-23" onclick="(()=&gt;{console.log('text 23 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(335.953598 169.601466) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-24" onclick="(()=&gt;{console.log('text 24 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(232.971874 258.553808) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-25" onclick="(()=&gt;{console.log('text 25 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(248.771502 299.468132) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-34" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-26" onclick="(()=&gt;{console.log('text 26 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(199.213878 206.324585) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-27" onclick="(()=&gt;{console.log('text 27 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(444.964679 332.520349) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-32" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-28" onclick="(()=&gt;{console.log('text 28 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(341.774186 339.623355) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-35" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-29" onclick="(()=&gt;{console.log('text 29 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(278.831389 312.87527) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-36" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-30" onclick="(()=&gt;{console.log('text 30 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(279.080561 152.246589) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-31" onclick="(()=&gt;{console.log('text 31 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(273.529238 281.158194) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-32" onclick="(()=&gt;{console.log('text 32 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(292.28304 437.124218) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-33" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-33" onclick="(()=&gt;{console.log('text 33 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(207.847093 320.425118) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-34" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-34" onclick="(()=&gt;{console.log('text 34 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(411.155112 337.45314) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-35" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-35" onclick="(()=&gt;{console.log('text 35 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(312.721831 137.338276) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-36" onclick="(()=&gt;{console.log('text 36 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(358.165623 477.463977) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-37" onclick="(()=&gt;{console.log('text 37 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(200.10369 364.776639) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-38" onclick="(()=&gt;{console.log('text 38 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(228.300336 209.562933) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-37" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-39" onclick="(()=&gt;{console.log('text 39 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(290.459616 239.607741) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-40" onclick="(()=&gt;{console.log('text 40 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(173.595109 322.147003) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-31" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-41" onclick="(()=&gt;{console.log('text 41 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(358.784874 437.766204) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-36" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-42" onclick="(()=&gt;{console.log('text 42 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(413.927594 407.153606) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-43" onclick="(()=&gt;{console.log('text 43 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(312.741682 407.26454) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-44" onclick="(()=&gt;{console.log('text 44 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(154.095894 358.795699) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-38" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-45" onclick="(()=&gt;{console.log('text 45 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(332.723876 275.599102) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-37" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-46" onclick="(()=&gt;{console.log('text 46 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(380.950141 419.578314) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-38" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-47" onclick="(()=&gt;{console.log('text 47 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(205.582536 438.239079) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-39" />
<use xlink:href="#DejaVuSans-Bold-39" x="69.580078" />
</g>
</g>
</g>
<g id="beatrice-text-male-48" onclick="(()=&gt;{console.log('text 48 clicked')})()"
class="beatrice-text-pointer">
<g clip-path="url(#pd42c8a995e)">
<g transform="translate(423.537047 366.877303) scale(0.12 -0.12)">
<use xlink:href="#DejaVuSans-Bold-31" />
<use xlink:href="#DejaVuSans-Bold-30" x="69.580078" />
<use xlink:href="#DejaVuSans-Bold-30" x="139.160156" />
</g>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="pd42c8a995e">
<rect x="85.985534" y="69.12" width="418.428931" height="443.52" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
client/demo/public/assets/buymeacoffee.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

30
client/demo/public/assets/gui_settings/GUI.json
View File

@ -1,30 +0,0 @@
{
"type": "demo",
"id": "RVC",
"front": {
"modelSlotControl": [
{
"name": "headerArea",
"options": {
"mainTitle": "Realtime Voice Changer Client",
"subTitle": ""
}
},
{
"name": "modelSlotArea",
"options": {}
},
{
"name": "characterArea",
"options": {}
},
{
"name": "configArea",
"options": {
"detectors": ["dio", "harvest", "crepe", "crepe_full", "crepe_tiny", "rmvpe", "rmvpe_onnx", "fcpe"],
"inputChunkNums": [1, 2, 4, 6, 8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048, 4096, 8192, 16384]
}
}
]
}
}

30
client/demo/public/assets/gui_settings/RVC.json
View File

@ -1,30 +0,0 @@
{
"type": "demo",
"id": "RVC",
"front": {
"modelSlotControl": [
{
"name": "headerArea",
"options": {
"mainTitle": "Realtime Voice Changer Client",
"subTitle": "for RVC"
}
},
{
"name": "modelSlotArea",
"options": {}
},
{
"name": "characterArea",
"options": {}
},
{
"name": "configArea",
"options": {
"detectors": ["dio", "harvest", "crepe"],
"inputChunkNums": [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048]
}
}
]
}
}

0
client/demo/public/assets/gui_settings/edition.txt
View File

1
client/demo/public/assets/gui_settings/edition_dml.txt
View File

@ -1 +0,0 @@
onnxdirectML-cuda

1
client/demo/public/assets/gui_settings/edition_web.txt
View File

@ -1 +0,0 @@
web

1
client/demo/public/assets/gui_settings/version.txt
View File

@ -1 +0,0 @@
-.-.-.-

BIN
client/demo/public/assets/icons/blank.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
client/demo/public/assets/icons/file-text.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 473 B

BIN
client/demo/public/assets/icons/flect.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

1
client/demo/public/assets/icons/folder.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 311 B

1
client/demo/public/assets/icons/github.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 522 B

1
client/demo/public/assets/icons/help-circle.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 365 B

1
client/demo/public/assets/icons/home.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 327 B

BIN
client/demo/public/assets/icons/human.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

1
client/demo/public/assets/icons/linkedin.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 395 B

BIN
client/demo/public/assets/icons/noimage.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

1
client/demo/public/assets/icons/tool.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 386 B

1
client/demo/public/assets/icons/twitter.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 403 B

BIN
client/demo/public/assets/icons/zun.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 KiB

BIN
client/demo/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

10
client/demo/public/index.html
View File

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8" />
<title>Voice Changer Client Demo</title>
</head>
<body style="width: 100%; height: 100%; margin: 0px">
<div id="app" style="width: 100%; height: 100%"></div>
</body>
</html>

1
client/demo/public/info_web
View File

@ -1 +0,0 @@
{}

BIN
client/demo/public/settings/amitaro/image.psd
View File

Binary file not shown.

40
client/demo/public/settings/amitaro/motion.json
View File

@ -1,40 +0,0 @@
[
{ "mode": "normal", "z_index": 0, "number": 1, "layer_path": "ROOT_全身" },
{ "mode": "normal", "z_index": 1, "number": 50, "layer_path": "ROOT_!目_*通常" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*通常→" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*∩∩" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "normal", "z_index": 2, "number": 80, "layer_path": "ROOT_!口_*にこ" },
{ "mode": "normal", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_*おすまし" },
{ "mode": "normal", "z_index": 3, "number": 100, "layer_path": "ROOT_!眉_*平行" },
{ "mode": "normal", "z_index": 3, "number": 100, "layer_path": "ROOT_!眉_*通常" },
{ "mode": "normal", "z_index": 4, "number": 100, "layer_path": "ROOT_表情_なし" },
{ "mode": "normal", "z_index": 4, "number": 100, "layer_path": "ROOT_表情_赤面" },
{ "mode": "normal", "z_index": 5, "number": 100, "layer_path": "ROOT_漫符_なし" },
{ "mode": "talking", "z_index": 0, "number": 1, "layer_path": "ROOT_全身" },
{ "mode": "talking", "z_index": 1, "number": 50, "layer_path": "ROOT_!目_*通常" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*通常→" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*∩∩" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_*お" },
{ "mode": "talking", "z_index": 2, "number": 5, "layer_path": "ROOT_!口_*え" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_* -" },
{ "mode": "talking", "z_index": 2, "number": 5, "layer_path": "ROOT_!口_*う" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_*にこ" },
{ "mode": "talking", "z_index": 3, "number": 20, "layer_path": "ROOT_!眉_*平行" },
{ "mode": "talking", "z_index": 3, "number": 40, "layer_path": "ROOT_!眉_*通常" },
{ "mode": "talking", "z_index": 3, "number": 40, "layer_path": "ROOT_!眉_*ドヤ" },
{ "mode": "talking", "z_index": 4, "number": 20, "layer_path": "ROOT_表情_なし" },
{ "mode": "talking", "z_index": 4, "number": 100, "layer_path": "ROOT_表情_赤面" },
{ "mode": "talking", "z_index": 5, "number": 10, "layer_path": "ROOT_漫符_なし" },
{ "mode": "talking", "z_index": 5, "number": 100, "layer_path": "ROOT_漫符_*♪" },
{ "mode": "talking", "z_index": 0, "number": 1, "layer_path": "ROOT_全身" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*∪∪" },
{ "mode": "talking", "z_index": 2, "number": 1, "layer_path": "ROOT_!口_*え" },
{ "mode": "talking", "z_index": 3, "number": 1, "layer_path": "ROOT_!眉_*平行" },
{ "mode": "talking", "z_index": 4, "number": 1, "layer_path": "ROOT_表情_なし" },
{ "mode": "talking", "z_index": 5, "number": 1, "layer_path": "ROOT_漫符_なし" }
]

6
client/demo/public/settings/amitaro/settings.json
View File

@ -1,6 +0,0 @@
{
"charaName": "あみたろ",
"psdFile": "/assets/settings/image.psd",
"motionFile": "/assets/settings/motion.json",
"motionSpeedRate": 1
}

BIN
client/demo/public/settings/image.psd
View File

Binary file not shown.

BIN
client/demo/public/settings/kikotokurage/image.psd
View File

Binary file not shown.

14
client/demo/public/settings/kikotokurage/motion.json
View File

@ -1,14 +0,0 @@
[
{ "mode": "normal", "z_index": 0, "number": 40, "layer_path": "ROOT_normal2" },
{ "mode": "normal", "z_index": 0, "number": 100, "layer_path": "ROOT_normal3" },
{ "mode": "talking", "z_index": 0, "number": 5, "layer_path": "ROOT_talk2" },
{ "mode": "talking", "z_index": 0, "number": 10, "layer_path": "ROOT_talk1" },
{ "mode": "talking", "z_index": 0, "number": 11, "layer_path": "ROOT_talk-u2" },
{ "mode": "talking", "z_index": 0, "number": 11, "layer_path": "ROOT_talk-u1" },
{ "mode": "talking", "z_index": 0, "number": 11, "layer_path": "ROOT_talk-u3" },
{ "mode": "talking", "z_index": 0, "number": 11, "layer_path": "ROOT_talk-u1" },
{ "mode": "talking", "z_index": 0, "number": 11, "layer_path": "ROOT_talk-u2" },
{ "mode": "talking", "z_index": 0, "number": 11, "layer_path": "ROOT_talk-u1" },
{ "mode": "talking", "z_index": 0, "number": 4, "layer_path": "ROOT_talk-u4" }
]

6
client/demo/public/settings/kikotokurage/settings.json
View File

@ -1,6 +0,0 @@
{
"charaName": "​黄琴海月",
"psdFile": "/assets/settings/image.psd",
"motionFile": "/assets/settings/motion.json",
"motionSpeedRate": 1
}

BIN
client/demo/public/settings/kikotomahiro/image.psd
View File

Binary file not shown.

4
client/demo/public/settings/kikotomahiro/motion.json
View File

@ -1,4 +0,0 @@
[
{ "mode": "normal", "z_index": 0, "number": 10, "layer_path": "ROOT_レイヤー2" },
{ "mode": "talking", "z_index": 0, "number": 10, "layer_path": "ROOT_レイヤー1" }
]

6
client/demo/public/settings/kikotomahiro/settings.json
View File

@ -1,6 +0,0 @@
{
"charaName": "黄琴まひろ",
"psdFile": "/assets/settings/image.psd",
"motionFile": "/assets/settings/motion.json",
"motionSpeedRate": 4
}

40
client/demo/public/settings/motion.json
View File

@ -1,40 +0,0 @@
[
{ "mode": "normal", "z_index": 0, "number": 1, "layer_path": "ROOT_全身" },
{ "mode": "normal", "z_index": 1, "number": 50, "layer_path": "ROOT_!目_*通常" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*通常→" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*∩∩" },
{ "mode": "normal", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "normal", "z_index": 2, "number": 80, "layer_path": "ROOT_!口_*にこ" },
{ "mode": "normal", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_*おすまし" },
{ "mode": "normal", "z_index": 3, "number": 100, "layer_path": "ROOT_!眉_*平行" },
{ "mode": "normal", "z_index": 3, "number": 100, "layer_path": "ROOT_!眉_*通常" },
{ "mode": "normal", "z_index": 4, "number": 100, "layer_path": "ROOT_表情_なし" },
{ "mode": "normal", "z_index": 4, "number": 100, "layer_path": "ROOT_表情_赤面" },
{ "mode": "normal", "z_index": 5, "number": 100, "layer_path": "ROOT_漫符_なし" },
{ "mode": "talking", "z_index": 0, "number": 1, "layer_path": "ROOT_全身" },
{ "mode": "talking", "z_index": 1, "number": 50, "layer_path": "ROOT_!目_*通常" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*通常→" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*∩∩" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*微笑" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_*お" },
{ "mode": "talking", "z_index": 2, "number": 5, "layer_path": "ROOT_!口_*え" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_* -" },
{ "mode": "talking", "z_index": 2, "number": 5, "layer_path": "ROOT_!口_*う" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!口_*にこ" },
{ "mode": "talking", "z_index": 3, "number": 20, "layer_path": "ROOT_!眉_*平行" },
{ "mode": "talking", "z_index": 3, "number": 40, "layer_path": "ROOT_!眉_*通常" },
{ "mode": "talking", "z_index": 3, "number": 40, "layer_path": "ROOT_!眉_*ドヤ" },
{ "mode": "talking", "z_index": 4, "number": 20, "layer_path": "ROOT_表情_なし" },
{ "mode": "talking", "z_index": 4, "number": 100, "layer_path": "ROOT_表情_赤面" },
{ "mode": "talking", "z_index": 5, "number": 10, "layer_path": "ROOT_漫符_なし" },
{ "mode": "talking", "z_index": 5, "number": 100, "layer_path": "ROOT_漫符_*♪" },
{ "mode": "talking", "z_index": 0, "number": 1, "layer_path": "ROOT_全身" },
{ "mode": "talking", "z_index": 1, "number": 1, "layer_path": "ROOT_!目_*∪∪" },
{ "mode": "talking", "z_index": 2, "number": 1, "layer_path": "ROOT_!口_*え" },
{ "mode": "talking", "z_index": 3, "number": 1, "layer_path": "ROOT_!眉_*平行" },
{ "mode": "talking", "z_index": 4, "number": 1, "layer_path": "ROOT_表情_なし" },
{ "mode": "talking", "z_index": 5, "number": 1, "layer_path": "ROOT_漫符_なし" }
]

6
client/demo/public/settings/settings.json
View File

@ -1,6 +0,0 @@
{
"charaName": "あみたろ",
"psdFile": "/assets/settings/image.psd",
"motionFile": "/assets/settings/motion.json",
"motionSpeedRate": 1
}

BIN
client/demo/public/settings/tsukuyomi/image.psd
View File

Binary file not shown.

25
client/demo/public/settings/tsukuyomi/motion.json
View File

@ -1,25 +0,0 @@
[
{ "mode": "normal", "z_index": 0, "number": 10, "layer_path": "ROOT_!体_!体　※選択肢なし" },
{ "mode": "normal", "z_index": 1, "number": 200, "layer_path": "ROOT_!右腕_*右手を下げる" },
{ "mode": "normal", "z_index": 1, "number": 40, "layer_path": "ROOT_!右腕_*右手を口に当てる" },
{ "mode": "normal", "z_index": 2, "number": 10, "layer_path": "ROOT_!左腕_*左手を下げる" },
{ "mode": "normal", "z_index": 3, "number": 10, "layer_path": "ROOT_!髪（おさげ）_!髪（おさげ）　※選択肢なし" },
{ "mode": "normal", "z_index": 4, "number": 10, "layer_path": "ROOT_!口 _*口を閉じて微笑む" },
{ "mode": "normal", "z_index": 5, "number": 10, "layer_path": "ROOT_!頬　_*通常" },
{ "mode": "normal", "z_index": 6, "number": 10, "layer_path": "ROOT_!目_*目を少し細める ★デフォルト" },
{ "mode": "normal", "z_index": 7, "number": 100, "layer_path": "ROOT_!眉　_*通常眉" },
{ "mode": "normal", "z_index": 7, "number": 10, "layer_path": "ROOT_!眉　_*通常眉：少し下げ" },
{ "mode": "talking", "z_index": 0, "number": 10, "layer_path": "ROOT_!体_!体　※選択肢なし" },
{ "mode": "talking", "z_index": 1, "number": 200, "layer_path": "ROOT_!右腕_*右手を下げる" },
{ "mode": "talking", "z_index": 1, "number": 40, "layer_path": "ROOT_!右腕_*右手を口に当てる" },
{ "mode": "talking", "z_index": 2, "number": 10, "layer_path": "ROOT_!左腕_*左手を下げる" },
{ "mode": "talking", "z_index": 3, "number": 10, "layer_path": "ROOT_!髪（おさげ）_!髪（おさげ）　※選択肢なし" },
{ "mode": "talking", "z_index": 4, "number": 3, "layer_path": "ROOT_!口 _*口を閉じて微笑む" },
{ "mode": "talking", "z_index": 4, "number": 3, "layer_path": "ROOT_!口 _*小さく笑う" },
{ "mode": "talking", "z_index": 4, "number": 3, "layer_path": "ROOT_!口 _*大きく笑う" },
{ "mode": "talking", "z_index": 5, "number": 10, "layer_path": "ROOT_!頬　_*通常" },
{ "mode": "talking", "z_index": 6, "number": 10, "layer_path": "ROOT_!目_*目を少し細める ★デフォルト" },
{ "mode": "talking", "z_index": 7, "number": 100, "layer_path": "ROOT_!眉　_*通常眉" },
{ "mode": "talking", "z_index": 7, "number": 10, "layer_path": "ROOT_!眉　_*通常眉：少し下げ" }
]

6
client/demo/public/settings/tsukuyomi/settings.json
View File

@ -1,6 +0,0 @@
{
"charaName": "つくよみちゃん",
"psdFile": "/assets/settings/image.psd",
"motionFile": "/assets/settings/motion.json",
"motionSpeedRate": 4
}

BIN
client/demo/public/vc_128.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
client/demo/public/vc_32.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
client/demo/public/vc_48.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
client/demo/public/vc_64.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

138
client/demo/src/000_index.tsx
View File

@ -1,138 +0,0 @@
import * as React from "react";
import { createRoot } from "react-dom/client";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { ErrorInfo, useEffect, useMemo, useState } from "react";
import "./css/App.css";
import ErrorBoundary from "./001_provider/900_ErrorBoundary";
import { AppStateProvider } from "./001_provider/001_AppStateProvider";
import { AppRootProvider, useAppRoot } from "./001_provider/001_AppRootProvider";
import { useIndexedDB } from "@dannadori/voice-changer-client-js";
import { Demo } from "./components/demo/010_Demo";
import { useMessageBuilder } from "./hooks/useMessageBuilder";
import { removeDB as webDBRemove } from "@dannadori/voice-changer-js";
library.add(fas, far, fab);
const container = document.getElementById("app")!;
const root = createRoot(container);
const App = () => {
const { appGuiSettingState } = useAppRoot();
const front = useMemo(() => {
if (appGuiSettingState.appGuiSetting.type == "demo") {
return <Demo></Demo>;
} else {
return <>unknown gui type. {appGuiSettingState.appGuiSetting.type}</>;
}
}, [appGuiSettingState.appGuiSetting.type]);
return <>{front}</>;
};
const AppStateWrapper = () => {
const { appGuiSettingState, getGUISetting } = useAppRoot();
const messageBuilderState = useMessageBuilder();
// エラーメッセージ登録
useMemo(() => {
messageBuilderState.setMessage(__filename, "Problem", { ja: "ちょっと問題が起きたみたいです。", en: "Looks like there's a bit of a problem." });
messageBuilderState.setMessage(__filename, "Problem-sub1", { ja: "このアプリで管理している情報をクリアすると回復する場合があります。", en: "" });
messageBuilderState.setMessage(__filename, "Problem-sub2", { ja: "下記のボタンを押して情報をクリアします。", en: "If you clear the information being managed by this app, it may be recoverable." });
messageBuilderState.setMessage(__filename, "Problem-action1", { ja: "アプリを初期化", en: "Initialize" });
messageBuilderState.setMessage(__filename, "Problem-action2", { ja: "初期化せずリロード", en: "Reload without initialize" });
}, []);
// エラーバウンダリー設定
const [error, setError] = useState<{ error: Error; errorInfo: ErrorInfo | null; reason: any }>();
const { removeDB } = useIndexedDB({ clientType: null });
const errorComponent = useMemo(() => {
const errorName = error?.error.name || "no error name";
const errorMessage = error?.error.message || "no error message";
const errorInfos = (error?.errorInfo?.componentStack || "no error stack").split("\n");
const reasonMessage = (error?.reason || "no reason").toString();
const reasonStack = (error?.reason.stack || "no stack").split("\n") as string[];
const onClearCacheClicked = async () => {
await removeDB();
await webDBRemove();
location.reload();
};
const onReloadClicked = () => {
location.reload();
};
return (
<div className="error-container">
<div className="top-error-message">{messageBuilderState.getMessage(__filename, "Problem")}</div>
<div className="top-error-description">
<p> {messageBuilderState.getMessage(__filename, "Problem-sub1")}</p>
<p> {messageBuilderState.getMessage(__filename, "Problem-sub2")}</p>
<p>
<button onClick={onClearCacheClicked}>{messageBuilderState.getMessage(__filename, "Problem-action1")}</button>
</p>
<p>
<button onClick={onReloadClicked}>{messageBuilderState.getMessage(__filename, "Problem-action2")}</button>
</p>
</div>
<div className="error-detail">
<div className="error-name">{errorName}</div>
<div className="error-message">{errorMessage}</div>
<div className="error-info-container">
{errorInfos.map((x) => {
return (
<div className="error-info-line" key={x}>
{x}
</div>
);
})}
</div>
</div>
<div className="error-detail">
<div className="error-name">{reasonMessage}</div>
<div className="error-message"></div>
<div className="error-info-container">
{reasonStack.map((x) => {
return (
<div className="error-info-line" key={x}>
{x}
</div>
);
})}
</div>
</div>
</div>
);
}, [error]);
const updateError = (error: Error, errorInfo: React.ErrorInfo | null, reason: any) => {
setError({ error, errorInfo, reason });
};
useEffect(() => {
const loadDefaultModelType = async () => {
getGUISetting();
};
loadDefaultModelType();
}, []);
if (!appGuiSettingState.guiSettingLoaded) {
return <>loading...</>;
} else {
return (
<ErrorBoundary fallback={errorComponent} onError={updateError}>
<AppStateProvider>
<App></App>
</AppStateProvider>
</ErrorBoundary>
);
}
};
root.render(
<AppRootProvider>
<AppStateWrapper></AppStateWrapper>
</AppRootProvider>,
);

83
client/demo/src/001_globalHooks/001_useAppGuiSetting.ts
View File

@ -1,83 +0,0 @@
import { useEffect, useState } from "react"
export type AppGuiSetting = {
type: "demo",
front: {
"modelSlotControl": GuiComponentSetting[],
}
}
export type GuiComponentSetting = {
"name": string,
"options": any
}
const InitialAppGuiDemoSetting: AppGuiSetting = {
type: "demo",
front: {
"modelSlotControl": []
}
}
export type AppGuiSettingState = {
appGuiSetting: AppGuiSetting
guiSettingLoaded: boolean
version: string
edition: string
}
export type AppGuiSettingStateAndMethod = AppGuiSettingState & {
getAppGuiSetting: (url: string) => Promise<void>
clearAppGuiSetting: () => void
}
export const useAppGuiSetting = (): AppGuiSettingStateAndMethod => {
const [guiSettingLoaded, setGuiSettingLoaded] = useState<boolean>(false)
const [appGuiSetting, setAppGuiSetting] = useState<AppGuiSetting>(InitialAppGuiDemoSetting)
const [version, setVersion] = useState<string>("")
const [edition, setEdition] = useState<string>("")
const getAppGuiSetting = async (url: string) => {
const res = await fetch(`${url}`, {
method: "GET",
})
const appSetting = await res.json() as AppGuiSetting
setAppGuiSetting(appSetting)
setGuiSettingLoaded(true)
}
const clearAppGuiSetting = () => {
setAppGuiSetting(InitialAppGuiDemoSetting)
setGuiSettingLoaded(false)
}
useEffect(() => {
const getVersionInfo = async () => {
const res = await fetch(`/assets/gui_settings/version.txt`, {
method: "GET",
})
const version = await res.text()
setVersion(version)
}
getVersionInfo()
}, [])
useEffect(() => {
const getVersionInfo = async () => {
const res = await fetch(`/assets/gui_settings/edition.txt`, {
method: "GET",
})
const edition = await res.text()
setEdition(edition)
}
getVersionInfo()
}, [])
return {
appGuiSetting,
guiSettingLoaded,
version,
edition,
getAppGuiSetting,
clearAppGuiSetting,
}
}

45
client/demo/src/001_globalHooks/001_useAudioConfig.ts
View File

@ -1,45 +0,0 @@
import { useEffect, useState } from "react"
export type AudioConfigState = {
audioContext: AudioContext | null
}
export const useAudioConfig = (): AudioConfigState => {
const [audioContext, setAudioContext] = useState<AudioContext | null>(null)
useEffect(() => {
const createAudioContext = () => {
const url = new URL(window.location.href);
const params = url.searchParams;
const sampleRate = params.get('sample_rate') || null
let ctx: AudioContext
if(sampleRate){
if(sampleRate == "default"){
console.log(`Sample rate: default`)
ctx = new AudioContext()
}else{
console.log(`Sample rate: ${sampleRate}`)
ctx = new AudioContext({ sampleRate: Number(sampleRate)})
}
}else{
console.log(`Sample rate: default(48000)`)
ctx = new AudioContext({ sampleRate: 48000})
}
console.log(ctx)
setAudioContext(ctx)
document.removeEventListener('touchstart', createAudioContext);
document.removeEventListener('mousedown', createAudioContext);
}
document.addEventListener('touchstart', createAudioContext, false);
document.addEventListener('mousedown', createAudioContext, false);
}, [])
const ret: AudioConfigState = {
audioContext
}
return ret
}

23
client/demo/src/001_globalHooks/001_useVCClient.ts
View File

@ -1,23 +0,0 @@
import { ClientState, useClient } from "@dannadori/voice-changer-client-js"
export type UseVCClientProps = {
audioContext: AudioContext | null
}
export type VCClientState = {
clientState: ClientState
}
export const useVCClient = (props: UseVCClientProps): VCClientState => {
const clientState = useClient({
audioContext: props.audioContext
})
const ret: VCClientState = {
clientState
}
return ret
}

37
client/demo/src/001_globalHooks/010_useMessageBuilder.ts
View File

@ -1,37 +0,0 @@
import { useRef } from "react"
export type Message = {
file: string,
id: string,
message: { [lang: string]: string }
}
export type MessageBuilderStateAndMethod = {
setMessage: (file: string, id: string, message: { [lang: string]: string }) => void
getMessage: (file: string, id: string) => string
}
export const useMessageBuilder_old = (): MessageBuilderStateAndMethod => {
const messagesRef = useRef<Message[]>([])
const setMessage = (file: string, id: string, message: { [lang: string]: string }) => {
if (messagesRef.current.find(x => { return x.file == file && x.id == id })) {
console.warn("duplicate message is registerd", file, id, message)
} else {
messagesRef.current.push({ file, id, message })
}
}
const getMessage = (file: string, id: string) => {
let lang = window.navigator.language
if (lang != "ja") {
lang = "en"
}
console.log(messagesRef.current)
return messagesRef.current.find(x => { return x.file == file && x.id == id })?.message[lang] || "unknwon message"
}
return {
setMessage,
getMessage
}
}

299
client/demo/src/001_globalHooks/100_useWebInfo.ts
View File

@ -1,299 +0,0 @@
import { ClientState, WebModelSlot } from "@dannadori/voice-changer-client-js";
import { VoiceChangerJSClientConfig, VoiceChangerJSClient, ProgressUpdateType, ProgreeeUpdateCallbcckInfo, VoiceChangerType, InputLengthKey, ResponseTimeInfo } from "@dannadori/voice-changer-js";
import { useEffect, useMemo, useRef, useState } from "react";
export type UseWebInfoProps = {
clientState: ClientState | null;
webEdition: boolean;
};
export const WebModelLoadingState = {
none: "none",
loading: "loading",
warmup: "warmup",
ready: "ready",
} as const;
export type WebModelLoadingState = (typeof WebModelLoadingState)[keyof typeof WebModelLoadingState];
export type VoiceChangerConfig = {
config: VoiceChangerJSClientConfig;
modelUrl: string;
portrait: string;
name: string;
termOfUse: string;
sampleRate: ModelSampleRateStr;
useF0: boolean;
inputLength: InputLengthKey;
progressCallback?: ((data: any) => void) | null;
};
export type WebInfoState = {
voiceChangerConfig: VoiceChangerConfig;
webModelLoadingState: WebModelLoadingState;
progressLoadPreprocess: number;
progressLoadVCModel: number;
progressWarmup: number;
webModelslot: WebModelSlot;
upkey: number;
responseTimeInfo: ResponseTimeInfo;
};
export type WebInfoStateAndMethod = WebInfoState & {
loadVoiceChanagerModel: () => Promise<void>;
setUpkey: (upkey: number) => void;
setVoiceChangerConfig: (voiceChangerType: VoiceChangerType, sampleRate: ModelSampleRateStr, useF0: boolean, inputLength: InputLengthKey) => void;
};
const ModelSampleRateStr = {
"40k": "40k",
"32k": "32k",
"16k": "16k",
} as const;
type ModelSampleRateStr = (typeof ModelSampleRateStr)[keyof typeof ModelSampleRateStr];
const noF0ModelUrl: { [modelType in VoiceChangerType]: { [inputLength in InputLengthKey]: { [sampleRate in ModelSampleRateStr]: string } } } = {
rvcv1: {
"24000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_24000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_24000.bin",
},
"16000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_16000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_16000.bin",
},
"12000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_12000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_12000.bin",
},
"8000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_8000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_8000.bin",
},
},
rvcv2: {
"24000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_24000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_24000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_nof0_24000.bin",
},
"16000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_16000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_16000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_nof0_16000.bin",
},
"12000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_12000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_12000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_nof0_12000.bin",
},
"8000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_8000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_8000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_nof0_8000.bin",
},
},
};
const f0ModelUrl: { [modelType in VoiceChangerType]: { [inputLength in InputLengthKey]: { [sampleRate in ModelSampleRateStr]: string } } } = {
rvcv1: {
"24000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_24000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_24000.bin",
},
"16000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_16000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_16000.bin",
},
"12000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_12000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_12000.bin",
},
"8000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_8000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_8000.bin",
},
},
rvcv2: {
"24000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_24000.bin",
// "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_24000.bin",
"32k": "https://192.168.0.247:8080/models/rvcv2_exp_v2_32k_f0_24000.bin",
// "16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_f0_24000.bin",
// "16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/vctk/rvcv2_vctk_v2_16k_f0_24000.bin",
"16k": "https://192.168.0.247:8080/models/rvcv2_vctk_v2_16k_f0_24000.bin",
},
"16000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_16000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_16000.bin",
// "16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_f0_16000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/vctk/rvcv2_vctk_v2_16k_f0_16000.bin",
},
"12000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_12000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_12000.bin",
// "16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_f0_12000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/vctk/rvcv2_vctk_v2_16k_f0_16000.bin",
},
"8000": {
"40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_8000.bin",
"32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_8000.bin",
// "16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_16k_f0_8000.bin",
"16k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/vctk/rvcv2_vctk_v2_16k_f0_8000.bin",
},
},
};
export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => {
const initVoiceChangerType: VoiceChangerType = "rvcv2";
const initInputLength: InputLengthKey = "24000";
const initUseF0 = true;
const initSampleRate: ModelSampleRateStr = "32k";
const progressCallback = (data: ProgreeeUpdateCallbcckInfo) => {
if (data.progressUpdateType === ProgressUpdateType.loadPreprocessModel) {
setProgressLoadPreprocess(data.progress);
} else if (data.progressUpdateType === ProgressUpdateType.loadVCModel) {
setProgressLoadVCModel(data.progress);
} else if (data.progressUpdateType === ProgressUpdateType.checkResponseTime) {
setProgressWarmup(data.progress);
}
};
const generateVoiceChangerConfig = (voiceChangerType: VoiceChangerType, sampleRate: ModelSampleRateStr, useF0: boolean, inputLength: InputLengthKey) => {
let modelUrl;
if (useF0) {
modelUrl = f0ModelUrl[voiceChangerType][inputLength][sampleRate];
} else {
modelUrl = noF0ModelUrl[voiceChangerType][inputLength][sampleRate];
}
const config: VoiceChangerConfig = {
config: {
voiceChangerType: voiceChangerType,
inputLength: inputLength,
baseUrl: window.location.origin,
inputSamplingRate: 48000,
outputSamplingRate: 48000,
},
modelUrl: modelUrl,
portrait: "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/amitaro.png",
name: "あみたろ",
termOfUse: "https://huggingface.co/wok000/vcclient_model/raw/main/rvc/amitaro_contentvec_256/term_of_use.txt",
sampleRate: sampleRate,
useF0: useF0,
inputLength: inputLength,
progressCallback,
};
return config;
};
const [voiceChangerConfig, _setVoiceChangerConfig] = useState<VoiceChangerConfig>(generateVoiceChangerConfig(initVoiceChangerType, initSampleRate, initUseF0, initInputLength));
const [webModelLoadingState, setWebModelLoadingState] = useState<WebModelLoadingState>(WebModelLoadingState.none);
const [progressLoadPreprocess, setProgressLoadPreprocess] = useState<number>(0);
const [progressLoadVCModel, setProgressLoadVCModel] = useState<number>(0);
const [progressWarmup, setProgressWarmup] = useState<number>(0);
const [upkey, setUpkey] = useState<number>(0);
const [responseTimeInfo, setResponseTimeInfo] = useState<ResponseTimeInfo>({
responseTime: 0,
realDuration: 0,
rtf: 0,
});
const voiceChangerJSClient = useRef<VoiceChangerJSClient>();
const webModelslot: WebModelSlot = useMemo(() => {
return {
slotIndex: -1,
voiceChangerType: "WebModel",
name: voiceChangerConfig.name,
description: "",
credit: "",
termsOfUseUrl: voiceChangerConfig.termOfUse,
iconFile: voiceChangerConfig.portrait,
speakers: {},
defaultTune: 0,
modelType: "pyTorchRVCNono",
f0: voiceChangerConfig.useF0,
samplingRate: 0,
modelFile: "",
};
}, []);
const setVoiceChangerConfig = (voiceChangerType: VoiceChangerType, sampleRate: ModelSampleRateStr, useF0: boolean, inputLength: InputLengthKey) => {
const config = generateVoiceChangerConfig(voiceChangerType, sampleRate, useF0, inputLength);
_setVoiceChangerConfig(config);
};
// useEffect(() => {
// setVoiceChangerConfig({ ...voiceChangerConfig, progressCallback });
// }, []);
const loadVoiceChanagerModel = async () => {
if (!props.clientState) {
throw new Error("[useWebInfo] clientState is null");
}
if (!props.clientState.initialized) {
console.warn("[useWebInfo] clientState is not initialized yet");
return;
}
if (!props.webEdition) {
console.warn("[useWebInfo] this is not web edition");
return;
}
console.log("loadVoiceChanagerModel1", voiceChangerConfig);
setWebModelLoadingState("loading");
voiceChangerJSClient.current = new VoiceChangerJSClient();
await voiceChangerJSClient.current.initialize(voiceChangerConfig.config, voiceChangerConfig.modelUrl, voiceChangerConfig.progressCallback);
console.log("loadVoiceChanagerModel2");
// worm up
setWebModelLoadingState("warmup");
const warmupResult = await voiceChangerJSClient.current.checkResponseTime();
console.log("warmup result", warmupResult);
// check time
const responseTimeInfo = await voiceChangerJSClient.current.checkResponseTime();
console.log("responseTimeInfo", responseTimeInfo);
setResponseTimeInfo(responseTimeInfo);
props.clientState?.setInternalAudioProcessCallback({
processAudio: async (data: Uint8Array) => {
const audioF32 = new Float32Array(data.buffer);
const res = await voiceChangerJSClient.current!.convert(audioF32);
const audio = new Uint8Array(res[0].buffer);
if (res[1]) {
console.log("RESPONSE!", res[1]);
setResponseTimeInfo(res[1]);
}
return audio;
},
});
setWebModelLoadingState("ready");
};
useEffect(() => {
if (!voiceChangerJSClient.current) {
console.log("setupkey", voiceChangerJSClient.current);
return;
}
voiceChangerJSClient.current.setUpkey(upkey);
}, [upkey]);
useEffect(() => {
console.log("change voice ", voiceChangerConfig);
setProgressLoadPreprocess(0);
setProgressLoadVCModel(0);
setProgressWarmup(0);
loadVoiceChanagerModel();
}, [voiceChangerConfig, props.clientState?.initialized]);
return {
voiceChangerConfig,
webModelLoadingState,
progressLoadPreprocess,
progressLoadVCModel,
progressWarmup,
webModelslot,
upkey,
responseTimeInfo,
loadVoiceChanagerModel,
setUpkey,
setVoiceChangerConfig,
};
};

38
client/demo/src/001_provider/001_AppRootProvider.tsx
View File

@ -1,38 +0,0 @@
import React, { useContext } from "react";
import { ReactNode } from "react";
import { AppGuiSettingStateAndMethod, useAppGuiSetting } from "../001_globalHooks/001_useAppGuiSetting";
import { AudioConfigState, useAudioConfig } from "../001_globalHooks/001_useAudioConfig";
type Props = {
children: ReactNode;
};
type AppRootValue = {
audioContextState: AudioConfigState;
appGuiSettingState: AppGuiSettingStateAndMethod;
getGUISetting: () => Promise<void>;
};
const AppRootContext = React.createContext<AppRootValue | null>(null);
export const useAppRoot = (): AppRootValue => {
const state = useContext(AppRootContext);
if (!state) {
throw new Error("useAppState must be used within AppStateProvider");
}
return state;
};
export const AppRootProvider = ({ children }: Props) => {
const audioContextState = useAudioConfig();
const appGuiSettingState = useAppGuiSetting();
const getGUISetting = async () => {
await appGuiSettingState.getAppGuiSetting(`/assets/gui_settings/GUI.json`);
};
const providerValue: AppRootValue = {
audioContextState,
appGuiSettingState,
getGUISetting,
};
return <AppRootContext.Provider value={providerValue}>{children}</AppRootContext.Provider>;
};

79
client/demo/src/001_provider/001_AppStateProvider.tsx
View File

@ -1,79 +0,0 @@
import { ClientState } from "@dannadori/voice-changer-client-js";
import { VoiceChangerJSClient } from "@dannadori/voice-changer-js";
import React, { useContext, useEffect, useRef } from "react";
import { ReactNode } from "react";
import { useVCClient } from "../001_globalHooks/001_useVCClient";
import { useAppRoot } from "./001_AppRootProvider";
import { useMessageBuilder } from "../hooks/useMessageBuilder";
import { WebInfoStateAndMethod, useWebInfo } from "../001_globalHooks/100_useWebInfo";
type Props = {
children: ReactNode;
};
type AppStateValue = ClientState & {
audioContext: AudioContext;
initializedRef: React.MutableRefObject<boolean>;
webInfoState: WebInfoStateAndMethod;
webEdition: boolean;
};
const AppStateContext = React.createContext<AppStateValue | null>(null);
export const useAppState = (): AppStateValue => {
const state = useContext(AppStateContext);
if (!state) {
throw new Error("useAppState must be used within AppStateProvider");
}
return state;
};
export const AppStateProvider = ({ children }: Props) => {
const appRoot = useAppRoot();
const webEdition = appRoot.appGuiSettingState.edition.indexOf("web") >= 0;
const clientState = useVCClient({ audioContext: appRoot.audioContextState.audioContext });
const messageBuilderState = useMessageBuilder();
const webInfoState = useWebInfo({ clientState: clientState.clientState, webEdition: webEdition });
// const voiceChangerJSClient = useRef<VoiceChangerJSClient>();
useEffect(() => {
messageBuilderState.setMessage(__filename, "ioError", {
ja: "エラーが頻発しています。対象としているフレームワークのモデルがロードされているか確認してください。",
en: "Frequent errors occur. Please check if the model of the framework being targeted is loaded.",
});
}, []);
const initializedRef = useRef<boolean>(false);
useEffect(() => {
if (clientState.clientState.initialized) {
initializedRef.current = true;
clientState.clientState.getInfo();
// clientState.clientState.setVoiceChangerClientSetting({
// ...clientState.clientState.setting.voiceChangerClientSetting
// })
}
}, [clientState.clientState.initialized]);
useEffect(() => {
if (clientState.clientState.ioErrorCount > 100) {
alert(messageBuilderState.getMessage(__filename, "ioError"));
clientState.clientState.resetIoErrorCount();
}
}, [clientState.clientState.ioErrorCount]);
useEffect(() => {
if (appRoot.appGuiSettingState.edition.indexOf("web") >= 0 && clientState.clientState.initialized) {
clientState.clientState.setWorkletNodeSetting({ ...clientState.clientState.setting.workletNodeSetting, protocol: "internal" });
// webInfoState.loadVoiceChanagerModel(); // hook内でuseEffectでinvoke
}
}, [clientState.clientState.initialized]);
const providerValue: AppStateValue = {
audioContext: appRoot.audioContextState.audioContext!,
...clientState.clientState,
initializedRef,
webInfoState,
webEdition,
};
return <AppStateContext.Provider value={providerValue}>{children}</AppStateContext.Provider>;
};

63
client/demo/src/001_provider/900_ErrorBoundary.tsx
View File

@ -1,63 +0,0 @@
import React, { ErrorInfo } from "react";
type ErrorBoundaryProps = {
children: React.ReactNode;
fallback: React.ReactNode;
onError: (error: Error, errorInfo: React.ErrorInfo | null, reason: any) => void;
};
type ErrorBoundaryState = {
hasError: boolean;
};
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
// @ts-ignore
private eventHandler: () => void;
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasError: false };
this.eventHandler = this.updateError.bind(this);
}
static getDerivedStateFromError(_error: Error) {
// console.warn("React Error Boundary Catch", error)
return { hasError: true };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
// For logging
console.warn("React Error Boundary Catch", error, errorInfo);
const { onError } = this.props;
if (onError) {
onError(error, errorInfo, null);
}
}
// 非同期例外対応
updateError() {
this.setState({ hasError: true });
}
handledRejection = (event: PromiseRejectionEvent) => {
const { onError } = this.props;
const error = new Error(event.type);
onError(error, null, event.reason);
this.setState({ hasError: true });
};
componentDidMount() {
// window.addEventListener('unhandledrejection', this.eventHandler)
window.addEventListener("unhandledrejection", this.handledRejection);
}
componentWillUnmount() {
// window.removeEventListener('unhandledrejection', this.eventHandler)
window.removeEventListener("unhandledrejection", this.handledRejection);
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}
export default ErrorBoundary;

41
client/demo/src/001_provider/_BlockingQueue.ts
View File

@ -1,41 +0,0 @@
export class BlockingQueue<T> {
private _promises: Promise<T>[];
private _resolvers: ((t: T) => void)[];
constructor() {
this._resolvers = [];
this._promises = [];
}
private _add() {
this._promises.push(
new Promise((resolve) => {
this._resolvers.push(resolve);
})
);
}
enqueue(t: T) {
if (this._resolvers.length == 0) this._add();
const resolve = this._resolvers.shift()!;
resolve(t);
}
dequeue() {
if (this._promises.length == 0) this._add();
const promise = this._promises.shift()!;
return promise;
}
isEmpty() {
return this._promises.length == 0;
}
isBlocked() {
return this._resolvers.length != 0;
}
get length() {
return this._promises.length - this._resolvers.length;
}
}

Some files were not shown because too many files have changed in this diff Show More