레몬그린 블로그

크롬에서 광고 차단이 막히다? Manifest V3 업데이트와 해결 방법

윤서아 — Fri, 1 Nov 2024 12:41:50 +0900

크롬 웹 스토어에서 uBlock Origin의 사용이 불가능해졌다. 이미지 출처 https://www.pcworld.com/article/2490090

크롬에서 드디어 Manifest V3 업데이트가 진행되었다. 전에도 유튜브에 애드블럭 관련 업데이트를 진행하거나, Manifest V3를 도입하겠다고 엄포를 놓은 크롬이었고, 결국 이번에 Manifest V3 업데이트가 진행되었다.

Manifest V3가 뭐고 어떻게 달라졌길래?

Manifest V3는 크롬 확장 프로그램의 구조와 기능을 정의하는 표준입니다. 이번에 V3으로 업데이트하면서, 보안과 성능을 향상시키겠다고 여러 변화가 있었는데. 그 중 몇몇 부분이 광고 차단기 확장 프로그램에 큰 타격을 주게 되었습니다.

웹 요청 수정 기능의 우선권 하락

V2의 webRequest 대신에 V3에선 declarativeNetRequest로 대체되었습니다. 이 API 변경의 가장 큰 문제는 브라우저가 웹 요청을 컨트롤할 최종 권한을 가지게 됩니다. 광고 차단 확장 프로그램에서 광고를 차단해도 크롬에서 그걸 무시하고 불러오게 할 수 있다는거죠.

사용할 수 있는 규칙 수의 제한

예를 들어, uBlock Origin이 정상적으로 작동하려면 최소 300,000개의 규칙을 사용할 수 있어야 합니다. 문제는 V3에서는 그 규칙의 제한이 30000개로 줄어들었습니다, 정상적인 광고 차단 환경을 조성할 수 없게 되었죠

사실 크롬이 이러한 칼을 빼들겠다고 경고한 게 좀 되긴 했습니다. 문제는 최근 유튜브가 광고 차단기를 무력화할려고 온갖 방법을 시도한 후 Manifest V3를 적용하며 화룡점정이 된 게 제일 크죠.

해결법?

사실 해결법들은 의외로 간단합니다. 이 패치는 크롬 브라우저의 확장 프로그램에만 적용된 거거든요.

Firefox 브라우저 사용

https://www.mozilla.org/ko/firefox/

데스크톱, 모바일 또는 기업용 Firefox 다운로드 - Mozilla

데스크톱, iOS, Android 중에서 선택하거나 모바일 다운로드 링크를 이메일로 보내드립니다.

www.mozilla.org

현재 유일한 크로미움 계열이 아닌 브라우저이며 Manifest V2를 지원합니다. 제가 또 힙스터에다가 OSS를 사랑하기 때문에 제가 애용하는 브라우저이기도 합니다. 파이어폭스 브라우저는 Manifest V2 지원을 그대로 진행하고 있으니, 기존 확장 프로그램을 그대로 설치해서 사용하시면 됩니다. 설치 시 크롬에서 그대로 설정을 가져올 수도 있구요.

AdGuard Desktop (유료)

https://adguard.com/

AdGuard — 세계에서 가장 진보된 광고 차단기! 최고의 광고 없는 환경을 경험하세요

AdGuard는 짜증나는 광고를 없애고, 온라인 추적과 멀웨어로부터 컴퓨터를 지키는 최고의 방법입니다. 광고 없이 빠르고 안전하게 웹 서핑하세요.

adguard.com

브라우저 확장 프로그램에서 광고를 차단하는게 막혔다면, 컴퓨터 단에서 실행하면 됩니다. 기존에는 크롬 안에 광고 차단기가 있었다면 이 프로그램은 아예 분리되어 컴퓨터 전체의 광고를 차단합니다.

솔직히 구글이 왜 이런 결정을 했는지는 이해는 갑니다. 근데 아무리 생각해도 V3를 도입한 이유가 유튜브 광고 차단으로 인한 수익 저하 빼고 찾을 수 없기 때문에 화가 나는거죠. 파이어폭스가 없었고 모든 브라우저가 크로미움 기반이었다면 이번 사태는 좀 끔찍했을 것 같네요..

윈도우에서도 사파리 브라우저 환경 테스트하기

윤서아 — Fri, 2 Aug 2024 15:45:24 +0900

최근 들어 개발하면서 사파리에서만 일어나는 문제가 너무 많았다. <video> 태그의 playsinline, svg의 <rect> 태그에 아무런 색을 주지 않으면 투명이 아니라 검은색으로 색칠되는 문제 등등... 프론트엔드를 하면서 유독 사파리만 비표준 혹은 동작이 다른 부분이 많아 속이 터질 지경이었다.

심지어 나는 윈도우를 사랑하는 개발자인데 ㅠ 윈도우에는 사파리 (Webkit) 브라우저가 없다는 게 참 힘들었다. 테스트도 못하는 환경이라니.

그래서 이번엔 어떻게든 삽질해서 알아낸 윈도우에서 웹킷 브라우저를 사용할 수 있는 방법을 알려드리겠다.

1. WSL

Windows Subsystem for Linux, 이하 WSL은 윈도우 환경에서 리눅스 시스템을 사용할 수 있게 해주는 기능이다. WSL2에 들어오면서 WSLg라는 기능이 추가되었는데, 무려 리눅스 GUI 프로그램을 그대로 윈도우에서 사용할 수 있는 기능이다.

리눅스에는 다행히도 Epiphany라는 Webkit 브라우저가 있으니, 해당 브라우저를 설치해서 사용해보려고 한다.

아래 링크를 참고해 WSL2와 우분투를 설치하자. 아마 내가 직접 쓰는 것보다 해당 링크에 더 상세한 가이드가 있을 것이다!

https://learn.microsoft.com/ko-kr/windows/wsl/install

WSL 설치

wsl --install 명령을 사용하여 Linux용 Windows 하위 시스템을 설치합니다. Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine 등 원하는 Linux 배포판에서 실행되는 Windows 머신에서 Bash 터미널을 사용할 수 있습니

learn.microsoft.com

WSL이 준비되었다면, Epiphany를 설치하고 실행하면 된다!

sudo snap install epiphany
sudo apt install epiphany-browser

장점

WSL 리눅스 가상 환경에서 실행되어서, 무거운 VM 없이 리눅스 + Webkit이라는 환경 테스트를 진행할 수 있다.
앞으로 설명할 다른 방법에 비해 그나마 UI, 브라우저 자체 기능이 존재하는 편이다.
설치가 간편하다.

단점

리눅스를 다루기 어려운 사람에겐 힘들 수 있다.
위의 스크린샷에서도 보이다시피, 한국어 지원이 안 좋다.
WSLg가 완벽한 건 아니라, HiDPI 환경에서는 브라우저가 너무 작게 보이거나 할 수 있다.
WSL은 네트워크 격리가 켜져있어서, 기본 설정에서는 localhost:3000 같이 로컬 개발 환경은 접속이 불가능하다. .wslconfig의 networkingMode를 mirrored로 수정하면 해결된다. (https://learn.microsoft.com/en-us/windows/wsl/wsl-config)

2. Webkit WinCairo 빌드

웹킷 공식 사이트에 적혀있는 윈도우에서 실행하는 방법이다. 빌드된 웹킷에 필요한 DLL을 따로 다운받아, 합쳐서 사용하는 방식이다.

https://docs.webkit.org/Ports/WindowsPort.html#downloading-build-artifacts-from-buildbot

Windows port - WebKit Documentation

Windows port WebKit had two Windows ports, Apple Windows port and WinCairo port. WinCairo port is called Windows port after the Apple Windows port was deprecated. It is using cairo for the graphics backend, libcurl for the network backend. It supports only

docs.webkit.org

DLL까지 넣어주고, MiniBrowser.exe를 열면 이런 초라한 브라우저가 나온다.

장점

웹킷의 가장 최신 빌드를 이용해 볼 수 있다.
개발자 편의 기능이 많다.

단점

정말 최소한의 브라우저 기능만 가지고 있다.
WinCairo 그래픽 백엔드가 다이나믹 폰트를 지원하지 않는다. 현재 웹킷의 그래픽 백엔드를 Skia로 포팅하는 중이라는데, 포팅되기 전까지는 다이나믹 폰트를 사용하는 경우엔 이상하게 폰트가 보인다 ㅠ

언젠가는 크롬, 파이어폭스, 웹킷 브라우저를 3개를 동시에 열고, 마우스 커서가 연동되는 그런 테스팅 툴을 만들고 싶다... ㅠ

나만의 TTS 만들기 - VITS 모델로 TTS 만들기 회고

윤서아 — Wed, 6 Mar 2024 16:08:17 +0900

전에 SCE-TTS로 친구의 TTS를 만든 적이 있었다.

https://lemongreen.tistory.com/13

SCE-TTS 버그 수정판과 TTS 제작 경험

https://sce-tts.github.io/#/v2/index SCE-TTS: 내 목소리로 TTS 만들기 문서를 불러오고 있습니다... sce-tts.github.io 심심해서 SCE-TTS를 만져보고 있었는데, 여러가지 버그가 많았습니다. 근데 프로젝트 개발도

lemongreen.tistory.com

살짝 아쉬웠던 부분은, 버그를 떠나서 TTS의 퀄리티가 조금 아쉬웠다. train 양이 부족한 건지, 모델이 안 좋은건지, 데이터셋이 모자란건지 노이즈도 있었고, 살짝 기계의 느낌이 많이 났다.

그러던 도중, SCE-TTS의 repo를 뒤져보다 branch에 v3의 흔적이 있길래, 좀 찾아봤는데 Piper라는 TTS 라이브러리를 사용하고 있었다. 상당히 설정도 간단하고, 성능도 좋은 것 같아서 시도하게 되었다.

앞으로는 삽질의 향연이다.

중요: 코딩 지식이 없는 사람은 안하는 걸 추천합니다. 너무 힘들거든요....

문제 1. Piper는 한국어 지원이 없었다.

https://github.com/rhasspy/piper

GitHub - rhasspy/piper: A fast, local neural text to speech system

A fast, local neural text to speech system. Contribute to rhasspy/piper development by creating an account on GitHub.

github.com

piper를 그대로 훈련에 쓰려고 했는데, 한국어 지원이 없었다.. 하지만 Piper가 VITS라는 모델에 기반하고 있다고 README에 적혀있길래, VITS의 한국어 트레이닝이 가능한 버전을 찾아 나섰다.

다행히도 있었다. README도 친절하고 example도 있어서 기반 지식이 있는 분들은 쉽게 따라할 수 있을 것이다.

https://github.com/ouor/vits

GitHub - ouor/vits: VITS implementation of Japanese, Chinese, Korean, Sanskrit and Thai

VITS implementation of Japanese, Chinese, Korean, Sanskrit and Thai - ouor/vits

github.com

다행히 예전에 녹음한 TTS의 데이터셋과 완벽하게 호환되는 듯 했다. (LJSpeech) 전처리만 거치고 바로 트레이닝에 들어갔다.

문제 2. 트레이닝이 왜 안돼니

전에 콜랩으로 훈련하다가, 콜랩 특유의 불안정성 때문에 콜랩을 갖다버리고 runpod으로 갈아타게 되었다. 훨씬 빠르고, 좋고, 싸다. 여러분도 꼭 써보시라.

https://runpod.io

Rent Cloud GPUs from $0.2/hour

Global Interoperability Select from 30+ regions across North America, Europe, and South America.

www.runpod.io

문제는 다른 곳에 있었다. runpod에 있는 최신 사양의 GPU인 4090과 pytorch 1.13.1 이미지로 작업할려니, CUDA 11.8을 깔아야한다더라. 문제는 CUDA 11.8을 지원하는 torch는 최소 ^2.0.0 버전부터였다. 우리가 사용하는 VITS repo는 2.0 지원이 없는 듯 했다.

결국 3090으로 다운그레이드 하고 다시 시작했다. 아니 근데 콜랩에선 잘만 되던게 에러를 뿜는 것이었다.

illegal memory error... 아마 메모리 부족으로 터지는 것이 확실했다. 3090이 메모리가 부족해서 터지는 것이 어이가 없었지만 대안을 찾아나섰다. 아마 체크포인트 로딩이나 세이브 중에 load_state_dict 라는 함수를 호출하는 중에 메모리 부족으로 터지는 듯 했다.

https://discuss.pytorch.org/t/load-state-dict-causes-memory-leak/36189/3

Load_state_dict causes memory leak

I’ll try that now and then post results here.

discuss.pytorch.org

다행히도 파이토치 커뮤니티에 해결 방법이 있어, 모든 load_state_dict를 CPU로 옮겨서 로딩하고 GPU로 옮기고, 불필요한 부분은 del도 하고, cache도 지우고.. 별 짓을 다했다.

근데 결국 해결하기 가장 좋은 법은 config.json에서 batch size를 줄이는 것이었다. 바로 해결되더라...아나..

3. 마지막 단계 ONNX로 최적화

제일 큰 문제가 다가왔다. 체크포인트를 그대로 쓸 순 없으니 ONNX로 export를 해야하는데, 지금 쓰고 있는 VITS repo와 piper repo의 onnx export 스크립트가 호환되지 않았다.

애초에 트레이닝 코드가 조금 다르니까 안되는 게 당연하지만, 머신러닝 관련 코드를 직접 짜보지 않은 나에게는 적잖이 당황할 수 밖에 없었다.

모든 지식을 총동원해서 ONNX를 export 하는 법을 찾고 있었다. piper에서 몇 줄 가져오고... 기존 리포 infer 예제에서 몇 줄 가져오고.. 파이토치 문서에서 가져오고... 참고한 문서는 아래에 추가해놓겠습니다..

https://github.com/rhasspy/piper/blob/master/src/python/piper_train/export_onnx.py

https://github.com/ouor/vits/blob/main/infer.ipynb

https://tutorials.pytorch.kr/advanced/super_resolution_with_onnxruntime.html

(선택) PyTorch 모델을 ONNX으로 변환하고 ONNX 런타임에서 실행하기

이 튜토리얼에서는 어떻게 PyTorch에서 정의된 모델을 ONNX 형식으로 변환하고 또 어떻게 그 변환된 모델을 ONNX 런타임에서 실행할 수 있는지에 대해 알아보도록 하겠습니다. ONNX 런타임은 ONNX 모델

tutorials.pytorch.kr

몇시간의 삽질 끝에.. 겨우 해냈다. 내가 스스로 ONNX 변환 코드를 짜다니. 내가 다 뿌듯하더라 ㅋㅋㅋ

설마 필요하실 분들을 위해 남겨놓겠습니다.

import IPython.display as ipd
import torch
import commons
import utils
from models import SynthesizerTrn
from text.symbols import symbols
from text import text_to_sequence
from scipy.io.wavfile import write


checkpoint_path = ''
config_path = ''
destination_path = 'wow.onnx'

hps = utils.get_hparams_from_file(config_path)
spk_count = hps.data.n_speakers

model_g = SynthesizerTrn(
            len(symbols),
            hps.data.filter_length // 2 + 1,
            hps.train.segment_size // hps.data.hop_length,
            n_speakers=hps.data.n_speakers,
            **hps.model)

model_g.eval()
utils.load_checkpoint(checkpoint_path, model_g, None)

def get_text(text):
    text_norm = text_to_sequence(text, hps.data.text_cleaners)
    if hps.data.add_blank:
        text_norm = commons.intersperse(text_norm, 0)
    text_norm = torch.LongTensor(text_norm)
    return text_norm

with torch.no_grad():
    model_g.dec.remove_weight_norm()
    
txt = get_text("학습은 잘 마치셨나요? 좋은 결과가 있길 바래요.")
input_text = txt.unsqueeze(0)
input_text_len = torch.LongTensor([txt.size(0)])
sid = torch.LongTensor([0])

arg = (output_text, output_text_len)

def infer_forward(text, text_lengths):
    audio = model_g.infer(
        text,
        text_lengths,
        noise_scale=.667,
        length_scale=1,
        noise_scale_w=0.8,
        sid=torch.LongTensor([0]),
    )[0][0,0]

    return audio

model_g.forward = infer_forward
model_g.cpu()

output = infer_forward(input_text, input_text_len).data.float().numpy()
print(output)
write(f'infer/onnx.wav', hps.data.sampling_rate, output)
ipd.display(ipd.Audio(output, rate=hps.data.sampling_rate, normalize=False))

torch.onnx.export(model_g, arg, destination_path,
    verbose=False,
    opset_version=15,
    input_names=["text", "text_lengths"],
    output_names=["output"],
    dynamic_axes={
        "text": {0: "batch_size", 1: "phonemes"},
        "text_lengths": {0: "batch_size"},
        "output": {0: "batch_size", 1: "time"},
    },
)

ouor/vits 리포에 의존적이고, 하드코딩도 많으니 알아서 조금씩 수정하셔서 쓰시면 될 것 같습니다.

ONNX 사용은 아래를 참고해주세용

import onnxruntime
import IPython.display as ipd
import torch
import commons
import utils
from text.symbols import symbols
from text import text_to_sequence
import numpy as np
from scipy.io.wavfile import write

ort_session = onnxruntime.InferenceSession("wow.onnx")
checkpoint_path = ''
config_path = ''
hps = utils.get_hparams_from_file(config_path)

def get_text(text):
    text_norm = text_to_sequence(text, hps.data.text_cleaners)
    if hps.data.add_blank:
        text_norm = commons.intersperse(text_norm, 0)
    # text_norm = torch.LongTensor(text_norm)
    text_norm = np.array(text_norm, dtype=np.int64)
    return text_norm

txt = get_text("학습은 잘 마치셨나요? 좋은 결과가 있길 바래요.")
input_text = np.expand_dims(txt, axis=0)
input_text_len = np.array([txt.shape[0]], dtype=np.int64)

arg = {
    "text": input_text,
    "text_lengths": input_text_len,
}

# ONNX 런타임에서 계산된 결과값
ort_outs = ort_session.run(["output"], arg)
output = ort_outs[0]

write(f'infer/onnx.wav', hps.data.sampling_rate, output)
ipd.display(ipd.Audio(output, rate=hps.data.sampling_rate, normalize=False))

onnx-simpilfier 사용하시면 용량도 줄고, 성능도 좋아집니다. 저의 경우에는 onnx 로딩에 0.9~초, inference에 0.7~초 걸리는 것 같더라구요.

https://github.com/daquexian/onnx-simplifier

GitHub - daquexian/onnx-simplifier: Simplify your onnx model

Simplify your onnx model. Contribute to daquexian/onnx-simplifier development by creating an account on GitHub.

github.com

코드들이 아주 더럽습니다..ㅋㅋㅋ 급해서 메모장에서 바로바로 갈겨 쓴거라 그래요.

쓰다보니 생각보다 커스텀한 구간이 많더라구요. inference 부분만 구현해놨긴 한데, 나중에 제대로 짜고 확장해서 tts-server도 만들어야겠습니다.. 자바스크립트로도 onnxruntime이 있다면 훨씬 좋았을텐데..ㅋㅋ 차피 numpy가 필요해서 안될 것 같네요 ㅋㅋ

+ 테스트 파일들은 example을 참고해주세요. 테스트 결과 파일은 제 목소리도 아닌 친구의 목소리기 때문에 공유해드릴 수가 없습니다.

Nuxt 3 간단 가이드 - useFetch의 장점, 단점, 팁

윤서아 — Mon, 11 Dec 2023 23:20:14 +0900

코드 예제 - https://stackblitz.com/edit/nuxt-usefetch-dollarfetch

Nuxt - useFetch, $fetch - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

stackblitz.com

Nuxt 특징 이해하기 - Nuxt는 리액트의 SSR 라이브러리처럼 따로 서버사이드 코드 / 클라이언트 사이드 코드를 분리하지 않는다.

클라이언트에 의존하는 부분은 알아서 내가 if (process.client) 등을 걸어서 처리해야한다.

코드가 분리되지 않아 간단하지만 오히려 고도화가 되면 불편해지는 단점을 낳는다.

아래의 사진은 Remix인데, 서버 사이드 코드는 깔끔하게 loader() 함수로 빠지고 props로 제공받는 걸 볼 수 있다.

Nuxt의 경우는 클라이언트와 서버의 경계가 없는 것처럼 쓸 수 있다. 처음에는 아주 편하지만 고도화 되면 불편을 야기할 수도 있다. (localStorage 액세스 같은 부분)

useFetch - SSR에 특화 https://nuxt.com/docs/api/composables/use-fetch

장점

SSR에 특화됨, server rendering -> client hydration 과정에서 중복 호출되지 않음.

사용에 용이하게 data, error, pending 등의 return value (ref type) 제공 (isLoading 선언과의 이별)

단점

useFetch().catch, try가 작동하지 않는다.

왜냐하면 요청이 완료되기도 전에 status, pending 등을 전달해주기 위해 에러 여부와 관계 없이 무조건 promise가 resolve가 된다. 따로 error와 status 데이터를 이용해 걸러 줄 필요가 있다.

사용자 인터랙션에 사용하기 안 좋다.

위에 말한 것 처럼 초기에 resolve가 되기 때문에, 리액티브하게 값이 업데이트 되지 않는 함수들에는 아주 치명적이다.

예를 들어 loadComments()에 useFetch를 넣어 사용한다면, 함수가 실행되었을 때 바로 pending: true를 뱉어내고 resolve 되어 함수가 끝난다.

이 이미지에서 comments는 null, commentsStatus는 'idle'로 끝난다.

당연하게도 더 이상의 업데이트가 생기지 않는다.

아래는 함수가 아닌데도 왜 작동하지 않냐면, <script setup> 안의 ref들은 모두 reactive하지만, if (process.client) 에서 스코프 안에 갇혀버려 더 이상 값이 바뀌어도 업데이트 되지 않는다.

다르게 말해서 스코프에 갇히는 순간 바보가 된다.

then 말고 await을 이용하면 해결 되지 않나? 아니다. 아래처럼 await을 써도 결국 돌아오는건 pending: true와 data: false 이기때문에 따로 watch를 걸어줘야한다. 매우 더럽고 성능 저하가 생길 수도 있으니 절대 피하자.

사용자 인터랙션에서는 $fetch를 사용하자.

Nuxt 3 - useFetch가 첫 로딩 때 항상 null이에요

윤서아 — Wed, 4 Oct 2023 23:21:02 +0900

로그인 된 유저 데이터를 가져오는데 자꾸 요청에 null이 돌아와서 난감이었다.

알고 보니 if (process.server) 등으로 서버 실행을 걸러내거나, Client-Only가 되었을 때 await으로 useFetch 등을 이용해 요청을 하면 hydration이 끝날 때까지 요청은 수행되지 않는다.

간단 설명: client only로 작동하는 await useFetch는 첫 요청을 하지 않는다.

해결책: $fetch를 쓰자.

https://nuxt.com/docs/api/composables/use-fetch

유튜브 무료로 쉽게 다운로드 하는 법

윤서아 — Mon, 15 May 2023 21:06:11 +0900

예전에 4K Downloader를 많이 썼는데, 이게 유료화가 되어서 결국 안 쓰게 되었죠

그렇다고 yt-dlp를 쓰자니, 비개발자에겐 많이 사용하기가 힘듭니다

그래서 찾은 yt-dlp-gui입니다.

https://github.com/kannagi0303/yt-dlp-gui/releases

Releases · kannagi0303/yt-dlp-gui

Windows GUI for yt-dlp. Contribute to kannagi0303/yt-dlp-gui development by creating an account on GitHub.

github.com

여기서 다운받으실 수 있고, 사용법은 간단합니다 링크 넣고 다운로드 하면 됩니다.

Vue의 새로운 상태 관리 라이브러리 Pinia를 써본 경험과 Vuex와의 차이점

윤서아 — Sun, 23 Apr 2023 16:55:45 +0900

전체적으로 Pinia가 좀 더 최신 트렌드를 반영하고, 자바스크립트 다워졌다고 생각합니다.

좀 더 React 라이브러리처럼 쓸 수 있게 변했다 해야하나? 전체적으로 Vue 3가 독자 문법같은 노선에서 자바스크립트 표준 문법 노선으로 간 것 같아 마음에 듭니다.

Pinia의 경우에는 state 선언 방법이 이렇습니다.

import { defineStore } from 'pinia'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [
      { name: 'Shoes', price: 30000 },
      { name: 'Apple', price: 5000 }
    ]
  }),
  getters: {
    productCount(state) {
      return state.products.length
    },
    productsCheaperThan(state) {
      return (price) => (
        state.products.filter(product =>
          product.price < price
        )
      )
    }
  },
  actions: {
    addProduct() {
      this.products.push()
    }
  }
})

이렇게 defineStore를 사용하여 store를 선언하고, state와 getter, action을 선언할 수 있습니다.

Vuex 3.x의 경우에는 Vuex.Store를 만들어서 export한 후에 Vue에서 use하게 하는 방식이었죠.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

사용법은 조금 차이가 납니다. Vuex 3.x의 경우에는 Vue 컴포넌트에서 this.$store.state나 store.state로 접근한 반면에, Pinia에서는 직접 import하여 사용합니다.

<script setup>
  import { useProductStore } from './stores/ProductStore'
  const store = useProductStore()
</script>
<template>
  <ul>
    <li v-for="product in store.products">
      ...
    </li>
  </ul>
  <p>{{ store.productCount }}</p>
  <ul>
    <li v-for="product in store.productsCheaperThan(10000)">
      ...
    </li>
  </ul>
  <button @click="store.addProduct(somethingProduct)">Add</button>
</template>

약간 React를 보는 것 같지 않나요? store를 import하고, useProductStore를 사용하여 store 변수를 따로 만들어주는 것까지.

저는 Vuex 3.x에 비해 이 방법이 매우 마음에 듭니다. 각자 이렇게 import하는 게 번거로울 수 있지만, 전역 state로 몰빵하는 것 보단 낫고, 요즘 트렌드에 맞춰 가는 것 같아서 좋습니다.

Vue Mastery에서 Pinia Cheatsheet를 공유하고 있으니 꼭 참고하세요!

또한 Devtool에서는 이곳에서! 변수를 확인 할 수 있습니다.

https://pinia.vuejs.org

Pinia | The intuitive store for Vue.js

Intuitive, type safe, light and flexible Store for Vue

pinia.vuejs.org

SCE-TTS 버그 수정판과 TTS 제작 경험

윤서아 — Fri, 17 Mar 2023 01:31:20 +0900

https://sce-tts.github.io/#/v2/index

SCE-TTS: 내 목소리로 TTS 만들기

문서를 불러오고 있습니다...

sce-tts.github.io

심심해서 SCE-TTS를 만져보고 있었는데, 여러가지 버그가 많았습니다.

근데 프로젝트 개발도 멈춘 것 같고해서, 수정판을 만들어서 공유합니다.

여러가지 라이선스가 얽힌 문제때문에 깃허브엔 올리지 않겠습니다. 파일 정리도 안되있구요..ㅎㅎ

제작자 : https://github.com/sce-tts, https://github.com/MycroftAI/mimic-recording-studio

다운로드: https://junsu.io/run.zip

압축 해제 후 위의 문서에 나온대로 사용하시면 됩니다. (run-server.bat)

수정한 소스는 https://junsu.io/mimic-recording-studio-master.zip 에 있습니다.

backend는 기존의 SCE-TTS 백엔드에서 저장 문제를 해결한 버전입니다.

PR: https://github.com/sce-tts/mimic-recording-studio/pull/1

Set encoding when read exists meta data file for append data. by smartse0k · Pull Request #1 · sce-tts/mimic-recording-studio

2회차 녹음 이후부터 인코딩 오류가 발생하여 기존 메타데이터 파일을 읽어올 때 인코딩을 지정하도록 하였습니다. 영향받는 함수 save_meta_data() Fix encoding problem when record and save an audio after first re

github.com

참고한 파일: https://github.com/sce-tts/mimic-recording-studio/pull/1/files

frontend는 getUserMedia의 변경으로 인해 오래된 mimic-recording-studio가 마이크를 못 불러오는 버그를 고친 버전입니다.

원본: https://github.com/MycroftAI/mimic-recording-studio

GitHub - MycroftAI/mimic-recording-studio: Mimic Recording Studio is a Docker-based application you can install to record voice

Mimic Recording Studio is a Docker-based application you can install to record voice samples, which can then be trained into a TTS voice with Mimic2 - GitHub - MycroftAI/mimic-recording-studio: Mim...

github.com

수정한 부분: https://github.com/MycroftAI/mimic-recording-studio/blob/master/frontend/src/App/components/Recorder.js

추가적으로 문의 사항이 있으시면 bananamilk452@gmail.com이나 댓글로 써주시면 감사하겠습니다.

TTS를 두 개 만들면서 얻은 노하우

어쩌다 지인 TTS를 만드는 프로젝트를 하게 되어서...

1. 녹음 할 때 빠르게 말하면 TTS도 빠르게 나옵니다. 평소 말하는 속도로 말해주세요. 3시간 녹음 귀찮다고 랩하듯이 해버리면 TTS도 랩을 합니다.

2. 녹음 양이 많으면 많을 수록 TTS에 기계적인 느낌이 빠지고 자연스러워집니다.

3. 훈련 시간과 퀄리티는 정비례 하지 않습니다. 저는 30만 체크포인트, 31000 체크포인트에서 보통 작업을 끝냈습니다. Tensorboard에서 loss를 보시면 알겠지만 점점 줄어드는데에도 한계가 있습니다. 잘 확인하시고 적당한 부분에서 훈련을 끝내시길 바랍니다.

4. Colab에서 TTS를 제작하는 노트북을 사용하다보면 오류가 좀 있습니다. numba의 버전을 0.52에서 0.53으로 올려야하는 등.. Colab이 아닌 다른 상위 버전 GPU에서 하려면 전체적으로 버전을 다 올려야하는 등... 이 프로젝트는 비 개발자에게 친화적이지 않습니다!! 꼭.. 스트레스로 머리가 빠지기 싫으시다면 개발자에게 부탁하시거나.. 포기하는게 낫습니다.

5. 마이크 소리가 너무 작으면 안됩니다.

6. 마이크 음질과 퀄리티는 어느정도 비례합니다.

7. mimic-recording-studio는 메모리 누수가 좀 있는지, 가끔가다 렉이 걸려 녹음이 끊기는 경우가 있습니다. 몇십개 한 후에는 새로고침을 해주세요.

자바스크립트에서 Date 객체를 생성하면 하루 전인 날짜가 나오는 이유

윤서아 — Fri, 20 Jan 2023 04:23:31 +0900

어느 날, 일기장을 토이 프로젝트로 만들고 있는데, 왠 날짜를 받아서 해당 날짜의 일기를 뿌려주는 함수가 작동하지 않고 있었다. 어쩌다보니 2022/12/22처럼 /로 구분 된 String을 Date 객체로 만들어 사용하고 있었는데, 이게 무슨 일이람?

정말 기가 막힌 언어가 아닐 수 없다. / 로 구분해서 날짜를 넣으면 KST 시각으로 인식해서 1월 1일 15시로 출력이 되고, - 로 구분해서 넣으면 UTC로 인식해서 잘 들어가는 기이한 현상을 볼 수 있었다...

여담으로, 이 문제를 발견하게 된 이유는 일기장 프론트엔드는 KST로 출력되고, DB에서는 UTC 기준으로 나오고, JS에서는 KST로 받아서 UTC로 출력하고, DB에서 받은 UTC Date 객체를 String으로 바꿔버렸는데 그걸 KST로 착각해서 머리가 터져 아무 문제 없는 코드를 수정하고 있었다. 그래도 뭐 하나라도 배우고 가서 기분은 좋다. ㅠ

backdrop-filter가 사파리에서 작동 안해요!!

윤서아 — Sun, 18 Sep 2022 11:14:03 +0900

정답: -webkit-backdrop-filter를 추가로 사용하기.

사파리에서는 vendor prefix와 함께 사용해야한다.