You may want to set a password, you are sharing this Gradio publicly. === GPU Information === GPU Device: Tesla T4 Total memory: 14.74786376953125 GB CUDA Version: 11.8 PyTorch Version: 2.0.1+cu118 OFFLOAD_CPU: True (Default is True) USE_SMALL_MODELS: False (Default is False) GLOBAL_ENABLE_MPS (Apple): False (Default is False) GPU Memory: 14.74786376953125 GB SUNO_HALF_PRECISION: False (Default is False) SUNO_HALF_BFLOAT16: False (Default is False) SUNO_DISABLE_COMPILE: False (Default is False) SUNO_USE_DIRECTML (AMD): False (Default is False) Torch Num CPU Threads: 1 Bark Model Location: /root/.cache/suno/bark_v0 (Env var 'XDG_CACHE_HOME' to override) HF_HOME: /content/bark/bark/bark/bark_infinity/data/models/unclassified FFmpeg status, this should say version 6.0 FFmpeg binaries directory: None FFmpeg Version: None FFmpeg Path: /root/.local/share/ffmpeg-downloader/ffmpeg/ffmpeg FFprobe Path: /root/.local/share/ffmpeg-downloader/ffmpeg/ffprobe FFplay Path: /root/.local/share/ffmpeg-downloader/ffmpeg/ffplay You should see Bark Infinity in your web browser now. If not go the the website you see below as 'Running on local URL:' python bark_webui.py --help for specific Gradio options. Running on local URL: http://127.0.0.1:7860 Running on public URL: https://ac8794b011a6d04585.gradio.live This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run `gradio deploy` from Terminal to deploy to Spaces (https://huggingface.co/spaces) history_prompt: bark/assets/prompts/pt_speaker_0.npz (1 of 1 iterations) Segment Breakdown (Speaker: bark/assets/prompts/pt_speaker_0.npz) ┏━━━━┳━━━━━━━┳━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ # ┃ Words ┃ Time Est ┃ Splitting long text aiming for 165 chars max 205 ┃ ┡━━━━╇━━━━━━━╇━━━━━━━━━━━╇━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┩ │ 1 │ 30 │ 12.00 s │ Como toque final no recurso Compartilhar Link, │ │ │ │ 191 chars │ adicionaremos um ícone a este botão. Para isso, │ │ │ │ │ usaremos uma biblioteca chamada Hero Icons, feita │ │ │ │ │ pelas mesmas pessoas por trás do Tailwind CSS. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 2 │ 35 │ 14.00 s │ Se procurarmos todos os ícones por Link, há um │ │ │ │ 203 chars │ ícone legal aqui, que é perfeito para o nosso botão │ │ │ │ │ Compartilhar Link. Então, antes de mais nada, vamos │ │ │ │ │ instalar essa biblioteca de ícones em nosso │ │ │ │ │ projeto. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 3 │ 25 │ 10.00 s │ Ele vem com um pacote de suporte React, que podemos │ │ │ │ 172 chars │ adicionar às nossas dependências executando npm │ │ │ │ │ install em hero-icons-slash-react. Esse pacote │ │ │ │ │ incluirá todos os ícones. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 4 │ 21 │ 8.40 s │ No momento, só precisamos do Link, mas talvez mais │ │ │ │ 132 chars │ tarde precisemos de alguns outros ícones também, │ │ │ │ │ todos com um design consistente. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 5 │ 26 │ 10.40 s │ De qualquer forma, podemos usar um ícone │ │ │ │ 170 chars │ importando-o do pacote que acabamos de instalar. │ │ │ │ │ Mas contém algumas pastas com diferentes variantes │ │ │ │ │ para cada conjunto de ícones. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 6 │ 21 │ 8.40 s │ Para o nosso exemplo, usaremos os ícones sólidos │ │ │ │ 131 chars │ 20x20. Este módulo fornece todos os ícones │ │ │ │ │ disponíveis. O que queremos é LinkIcon. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 7 │ 28 │ 11.20 s │ E podemos usá-lo como qualquer outro componente │ │ │ │ 200 chars │ React, adicionando-o aos nossos elementos JSX. │ │ │ │ │ Agora, a vantagem desta biblioteca é que podemos │ │ │ │ │ instalar cada ícone usando classes utilitárias │ │ │ │ │ Tailwind. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 8 │ 24 │ 9.60 s │ Normalmente, queremos definir pelo menos as │ │ │ │ 154 chars │ dimensões e usarei HNW4, que é efetivamente 16 │ │ │ │ │ pixels. Queremos mantê-lo pequeno, já que está │ │ │ │ │ dentro do botão. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 9 │ 33 │ 13.20 s │ Vou precisar recarregar a página, porque acabei de │ │ │ │ 198 chars │ reiniciar o servidor de desenvolvimento. Mas você │ │ │ │ │ pode ver o ícone exibido dentro do botão. Agora, │ │ │ │ │ queremos que ele esteja na mesma linha do texto. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 10 │ 34 │ 13.60 s │ Então vamos mudar o botão para usar o Flexbox. Isso │ │ │ │ 188 chars │ é uma melhoria, mas precisamos de algum espaço │ │ │ │ │ entre o ícone e o texto. E também devemos │ │ │ │ │ alinhá-los verticalmente com o centro de itens. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 11 │ 35 │ 14.00 s │ Ok, o botão parece muito bom agora. Deixe-me apenas │ │ │ │ 184 chars │ dividir esta longa string, para que você possa ver │ │ │ │ │ o código completo. Mas é isso. Isso é tudo o que é │ │ │ │ │ necessário para usar um ícone. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 12 │ 33 │ 13.20 s │ Também é um exemplo simples de como usar um │ │ │ │ 201 chars │ componente de terceiros em nosso aplicativo. Agora, │ │ │ │ │ os ícones contêm apenas elementos SVG, para que │ │ │ │ │ você possa usá-los em componentes de servidor ou │ │ │ │ │ cliente. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 13 │ 26 │ 10.40 s │ Mas se você importar um widget de terceiros que │ │ │ │ 146 chars │ também usa a funcionalidade do lado do cliente, │ │ │ │ │ você só poderá usá-lo em um componente do cliente. │ ├────┼───────┼───────────┼─────────────────────────────────────────────────────┤ │ 14 │ 31 │ 12.40 s │ Se você ainda não tem um componente cliente, você │ │ │ │ 186 chars │ sempre pode criar um, e simplesmente agrupar o │ │ │ │ │ componente de terceiros. E você pode usar esse │ │ │ │ │ componente de terceiros por conta própria. │ └────┴───────┴───────────┴─────────────────────────────────────────────────────┘ segment_text: Como toque final no recurso Compartilhar Link, adicionaremos um ícone a este botão. Para isso, usaremos uma biblioteca chamada Hero Icons, feita pelas mesmas pessoas por trás do Tailwind CSS. --Segment 1/14: est. 12.00s () Como toque final no recurso Compartilhar Link, adicionaremos um ícone a este botão. Para isso, usaremos uma biblioteca chamada Hero Icons, feita pelas mesmas pessoas por trás do Tailwind CSS. --Loading text model from /root/.cache/suno/bark_v0/text_2.pt to cpu/gpu: Offloading, cpu until needed, then gpu _load_model model loaded: 312.3M params, 1.269 loss generation.py:2024 --Loading coarse model from /root/.cache/suno/bark_v0/coarse_2.pt to cpu/gpu: Offloading, cpu until needed, then gpu _load_model model loaded: 314.4M params, 2.901 loss generation.py:2024 --Loading fine model from /root/.cache/suno/bark_v0/fine_2.pt to cpu/gpu: Offloading, cpu until needed, then gpu _load_model model loaded: 302.1M params, 2.079 loss generation.py:2024 --Loading codec model from EncodecModelPath to cpu/gpu: Offloading, cpu until needed, then gpu _load_codec_model torch.compile available, compiling codec generation.py:298 model. write_audiofile .mp3 saved to api.py:698 bark_samples/Como_toque_fina-23-0819-0109-37-SPK-pt_speaker_0/001_Com o_toque_fina-23-0819-0112-02-SPK-pt_speaker_0.mp3 segment_text: Se procurarmos todos os ícones por Link, há um ícone legal aqui, que é perfeito para o nosso botão Compartilhar Link. Então, antes de mais nada, vamos instalar essa biblioteca de ícones em nosso projeto. --Segment 2/14: est. 14.00s () Se procurarmos todos os ícones por Link, há um ícone legal aqui, que é perfeito para o nosso botão Compartilhar Link. Então, antes de mais nada, vamos instalar essa biblioteca de ícones em nosso projeto. write_audiofile .mp3 saved to api.py:698 bark_samples/Como_toque_fina-23-0819-0109-37-SPK-pt_speaker_0/002_Se_ procurarmos_-23-0819-0113-01-SPK-pt_speaker_0.mp3 segment_text: Ele vem com um pacote de suporte React, que podemos adicionar às nossas dependências executando npm install em hero-icons-slash-react. Esse pacote incluirá todos os ícones. --Segment 3/14: est. 10.00s () Ele vem com um pacote de suporte React, que podemos adicionar às nossas dependências executando npm install em hero-icons-slash-react. Esse pacote incluirá todos os ícones.