DEV Community: Bruno Duarte

VSCode + Ollama + Continue = chat e tab completions gratuitamente

Bruno Duarte — Thu, 05 Sep 2024 19:27:19 +0000

Como instalar e usar LLMs localmente no seu VSCode:

1- Baixe Ollama diretamente pelo site https://ollama.com/, ele ira criar seu server local para a LLM

2- Baixe uma LLM (neste tutorial vamos usar o qwen2) no site https://ollama.com/library

Você deve ter pelo menos 8 GB de RAM disponíveis para rodar os modelos de 7B, 16 GB para rodar os modelos de 13B e 32 GB para rodar os modelos de 33B.

3- Abra o terminal e cole este comando:



ollama run qwen2

4- Após a instalação ele ja estará rodando a LLM no seu terminal, onde você ja pode testar fazendo alguma pergunta. Digite /bye para sair

5- Instale a extensão Continue no seu VSCode:

6- Abra o Continue e verá a tela de adicionar modelo, selecione Ollama:

7- Selecione Autodetect, ele ja reconhecerá a LLM instalada na sua máquina

8- Chat funcionando! Para saber mais detalhes e comandos acesse: https://docs.continue.dev/intro

Tab Autocomplete:

1- Vamos configurar o Continue para utilizar sua LLM para o autocomplete no VSCode. Selecione a engrenagem no canto inferior direito da tela de chat

2- Dentro do arquivo config.json: adicione:



"tabAutocompleteModel": {
    "title": "Tab Autocomplete Model",
    "provider": "ollama",
    "model": "qwen2",
    "apiBase": "http://localhost:11434/"
  },

Irá ficar mais ou menos assim:

Depois você pode testar outras LLMs para o autocomplete, como a starcoder2-3b

3- Tudo certo, agora você tem autocomplete via LLM local!

Agora você tem todas as funcionalidades do Copilot na sua máquina, de forma totalmente gratuita.

Implementando o Debounce no React: Melhorando a Experiência do Usuário em Eventos de Entrada

Bruno Duarte — Tue, 04 Apr 2023 02:23:29 +0000

O Debounce é uma técnica muito útil no desenvolvimento de aplicações React para lidar com eventos de entrada do usuário que ocorrem com muita frequência em curtos períodos de tempo, como a digitação em um campo de pesquisa. Quando um usuário digita em um campo de pesquisa, um evento é acionado a cada letra digitada, o que pode causar uma sobrecarga de solicitações ao servidor e um atraso na resposta para o usuário. É aí que entra o Debounce.

O Debounce é um padrão de design que permite limitar a frequência com que uma função é chamada, aguardando um determinado período de tempo após o último evento antes de executar a função. Dessa forma, ele evita que a função seja chamada muitas vezes em rápida sucessão e reduz a carga no servidor.

No React, existem várias maneiras de implementar o Debounce. Uma das maneiras mais comuns é usando o hook useEffect. Mas também é possível implementar usando outras técnicas, como o useCallback e a biblioteca Lodash.

Para implementar o Debounce com o hook useEffect, basta usar o setTimeout para adiar a chamada da função até que o período de tempo especificado tenha passado. Aqui está um exemplo simples:

Nesse exemplo, a função passada para o setTimeout será executada após um atraso de 1000ms (1 segundo) após o último evento de digitação. Além disso, o retorno da useEffect é uma função que limpa o temporizador, garantindo que a função não seja executada caso o usuário continue digitando.

Em resumo, o Debounce é uma técnica valiosa para reduzir a carga no servidor e melhorar a experiência do usuário em aplicações React. Com as diversas opções de implementação disponíveis, vale a pena experimentar e escolher a abordagem que melhor se adapta às necessidades da sua aplicação.

Qual a melhor maneira de consumir APIs

Bruno Duarte — Sun, 19 Feb 2023 19:39:23 +0000

Se você está trabalhando com React e precisa consumir APIs, provavelmente já se perguntou qual a melhor forma de fazer isso. Duas das opções mais populares são os hooks useEffect e useQuery, mas qual é a melhor maneira de consumir APIs em seus projetos?

Neste artigo, exploraremos as diferenças entre esses dois hooks do React e examinaremos em quais situações cada um pode ser a melhor escolha para consumir APIs.

O que é o useEffect?

O useEffect é um dos hooks mais utilizados do React e permite executar efeitos colaterais em componentes funcionais. Esses efeitos podem incluir, por exemplo, a busca de dados de uma API, a atualização de estados de componentes ou a execução de outras operações que não afetam diretamente a renderização do componente.

O useEffect é uma ferramenta poderosa e versátil, mas pode ficar um pouco complicado gerenciá-lo em projetos maiores, especialmente se você estiver consumindo várias APIs.

O que é o useQuery?

O useQuery, por outro lado, é um hook do React fornecido pela biblioteca react-query. Ele foi criado para tornar mais fácil a busca, cacheamento e atualização de dados em uma API. O useQuery utiliza uma abordagem baseada em consultas (queries) para gerenciar os dados da API, o que torna o processo de busca de dados mais eficiente e fácil de gerenciar.

Com o useQuery, você pode especificar o endpoint da API e quaisquer parâmetros necessários na consulta e a biblioteca cuida do restante. Ele também possui recursos de cacheamento e atualização, que podem ser úteis em projetos maiores.

Quando usar useEffect?

O useEffect pode ser uma boa escolha em projetos menores ou em situações em que você não está lidando com muitas APIs ou não precisa do cacheamento e atualização automática de dados.

Além disso, o useEffect é útil para situações em que você precisa executar operações que não estão diretamente relacionadas à API, como atualizações de estado, execução de animações ou manipulação do DOM.

Quando usar useQuery?

O useQuery pode ser uma melhor opção para projetos maiores ou em situações em que você precisa consumir várias APIs diferentes. Ele simplifica o processo de busca de dados e cuida do cacheamento e atualização automática de dados, o que pode ser muito útil em projetos em constante mudança.

Além disso, o useQuery é útil para situações em que você precisa controlar o tempo de busca de dados, como por exemplo a definição de um tempo mínimo de intervalo entre as consultas.

Conclusão

Ambos os hooks useEffect e useQuery são ferramentas poderosas e podem ser úteis para consumir APIs em projetos React. No entanto, em geral, o useEffect é mais adequado para projetos menores ou em situações em que você precisa executar operações que não estão diretamente relacionadas à API.

Já o useQuery é mais adequado para projetos maiores ou em situações em que você precisa consumir várias APIs diferentes e precisa de recursos de cacheamento e atualização automática de dados.

Em resumo, a escolha entre o useEffect e o useQuery depende do tamanho e complexidade do seu projeto, bem como dos recursos de gerenciamento de dados que você precisa. Ambos são ferramentas úteis que podem ajudá-lo a consumir APIs em seus projetos React de maneira eficiente e eficaz.