DEV Community: Junior Martins

Iris: an offline visual assistant in Brazilian Portuguese powered by Gemma 4

Junior Martins — Tue, 12 May 2026 21:30:24 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4.

TL;DR

Iris is an Android visual assistant for blind and low-vision users.
It describes what the camera sees, out loud, in Brazilian Portuguese.
Gemma 4 multimodal runs 100% on the phone via LiteRT-LM — no cloud, no telemetry, no INTERNET permission.
Three intent-specific modes: Continuous, Question, Reading.

What I Built

I built Iris, an offline Android visual assistant for blind and low-vision users.

The interaction is intentionally simple: point the phone camera at something, tap the screen, and Iris speaks what it sees in Brazilian Portuguese.

Iris has three modes:

Continuous Mode describes the scene in front of the user.
Question Mode lets the user ask a spoken question about the current camera image.
Reading Mode reads visible text aloud, such as a label, medicine box, sign, or package.

A fourth control, Repeat, replays the last description — useful for users who could not catch it all the first time.

The core constraint was not only "can Gemma 4 understand the image?" — the real question was whether this could still be useful when the camera is looking at private, everyday scenes and the user may not have a reliable network connection.

That led to the main technical decision: everything runs on the phone.

No server. No cloud API. No telemetry. No INTERNET permission in the Android manifest.

Demo

The demo shows Iris running on a Galaxy S21 with airplane mode visible. The right side of the video is the actual phone screen; the left side explains what each mode is doing.

The video is not meant to hide the on-device latency. On a Galaxy S21, the first spoken sentence arrives in roughly 25–30 seconds after the tap. The wait is part of the point: Gemma 4 is doing the multimodal work locally, on the phone, with no help from a server.

Code

Repository:

https://github.com/juniormartinxo/iris

The project is a native Android app built with Kotlin, Jetpack Compose, CameraX, Android TTS/STT, and LiteRT-LM.

Why This App Needed To Be Offline

A visual assistant sees the user's world.

That can mean a medicine label, a document on a desk, a room at home, a person nearby, a screen, or an object the user is trying to identify. For this kind of app, "send the image to a server" is not a neutral implementation detail. It changes the privacy model of the product.

I wanted Iris to have a stronger boundary:

camera frames stay on the device;
speech recognition uses Android's on-device recognizer;
speech output uses Android Text-to-Speech;
Gemma 4 runs through LiteRT-LM locally;
the app does not request Internet access.

The Android manifest only asks for the permissions the app needs to see and hear:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

There is no android.permission.INTERNET.

That means the app cannot silently fall back to a network call unless a future version explicitly changes the permission model.

How I Used Gemma 4

Iris uses Gemma 4 E2B as the primary model, packaged as a .litertlm bundle and loaded with LiteRT-LM on Android.

I chose E2B because the target device is a phone, not a workstation. The challenge prompt asks builders to be intentional about model selection, and for this project the priority was clear: local multimodal inference with the smallest model that could still make the experience meaningful.

The app can also look for an E4B bundle as a fallback, but the loading order prefers E2B:

val MODEL_CANDIDATES: List<Pair<String, String>> = listOf(
    "E2B" to "gemma-4-E2B-it.litertlm",
    "E4B" to "gemma-4-E4B-it.litertlm",
)

For the current demo, E2B is the right trade-off: it keeps the app viable on devices like the Galaxy S21 and A55 while still giving Iris native multimodal understanding.

The app sends Gemma 4 one camera frame plus a mode-specific prompt:

in Continuous Mode, the prompt asks for a short scene description focused on obstacles, relevant objects, visible text, and people;
in Question Mode, Android's on-device speech recognizer captures the user's question, then Gemma 4 answers using the current image;
in Reading Mode, the prompt asks Gemma 4 to read visible text from top to bottom and left to right.

All prompts ask for Brazilian Portuguese output because the product is designed for PT-BR users first.

Architecture

The runtime path is deliberately small:

CameraX preview
  -> capture current frame
  -> downsample image to a 512px longest edge
  -> run frame quality checks
  -> Gemma 4 E2B through LiteRT-LM
  -> sentence buffer
  -> Android Text-to-Speech

There are a few details in that pipeline that matter.

1. Frame quality checks before inference

On-device multimodal inference is expensive enough that Iris should not waste a run on a useless image.

Before calling Gemma 4, the app calculates a small set of image quality signals:

brightness;
luminance variance;
a simple blur score.

If the image is too dark, too bright, too empty, or too blurry, Iris speaks a direct instruction like:

"Imagem muito escura. Verifique a iluminação ou se há algo cobrindo a câmera."

That is better than waiting through a slow inference only to get a weak answer.

2. Sentence streaming into TTS

LiteRT-LM returns text chunks. Iris does not wait for the entire response before speaking.

A small SentenceBuffer collects chunks until it sees a sentence boundary, then sends each sentence to Android TTS. The user hears the first useful sentence as soon as possible, while the model can still finish the rest of the response.

For accessibility, this is not just a polish detail. Silence during a long local inference can feel like the app froze. Iris speaks "Aguarde." as a progress beacon every 15 seconds while inference is still running. The moment the first sentence arrives from the model, the loading overlay disappears and the description starts streaming into the screen — one sentence at a time — so visual and audio feedback stay in sync.

3. Modes are prompt engineering exposed as UI

I did not want one generic "describe" button to handle every situation.

Blind and low-vision users often know what they need:

"What is in front of me?"
"Is there a silver object here?"
"Read this medicine box."

The three modes let the UI choose the prompt shape before the model runs. This keeps the responses shorter, more predictable, and easier to listen to.

4. TalkBack-aware behavior

Iris is built around audio, but Android accessibility already has an audio layer: TalkBack.

When TalkBack is enabled, Iris avoids speaking over UI announcements. When TalkBack is not enabled, Iris uses its own TTS announcements for mode changes, loading states, errors, and tutorial flow.

Every primary control has a contentDescription, including:

Continuous Mode;
Question Mode;
Reading Mode;
Repeat.

This lets the same interface work for screen-reader users and for users who are not running TalkBack.

Performance on the Galaxy S21

Step	Time / size
Cold start to "Ready" (model load)	~10–30 s
Tap → first spoken word	~25–35 s
Tap → full response done	~35–50 s
Memory while idle (model loaded)	~3 GB
APK size (debug)	~99 MB
Model bundle (sideloaded `.litertlm`)	~2.59 GB

These are not best-in-class numbers. They are the cost of doing multimodal inference fully on-device on a 2021 phone. The UX is designed around making that wait legible, not invisible — that is what the progress beacon and the sentence streaming are for.

Numbers above are approximate, taken on a single Galaxy S21 unit. They will vary by device, by ambient thermal state, and by how much memory the rest of the system is using.

What Gemma 4 Unlocked

The important thing about Gemma 4 here is not only that it can caption an image.

It lets Iris treat visual assistance as a flexible language problem:

a scene can be summarized;
a user question can be grounded in the image;
visible text can be read in context;
the output can be constrained to short, spoken PT-BR sentences.

Without a multimodal model, this app would likely become a collection of separate systems: one detector, one OCR pipeline, one classifier, one rules engine, and a lot of glue code. That can be the right architecture for a mature product, but it is much heavier for a fast prototype.

Gemma 4 made it possible to build one coherent loop:

image + intent -> useful spoken answer

What Was Hard

The hardest part was not wiring the camera to the model. It was making the experience feel reliable enough for an audio-first user.

Some examples:

The app must tell the user when the model is still working.
A second tap should cancel or replace the previous flow cleanly.
If speech recognition is unavailable offline, the app should explain that instead of failing silently.
If the camera points at a blank wall, the model should not invent a detailed scene.
If the device is too hot, the app should refuse another expensive inference instead of making the phone worse.

Some other details would have been invisible in a tech demo but mattered for a real app: guarding the camera tap area against overlay-based tap-jacking, capping the crash log file size so a failure loop cannot fill the disk, synchronizing access to the speech recognizer so it cannot be torn down mid-utterance. Each one came from imagining what a confused or panicked user would experience.

Iris is still a prototype, but these details are the difference between a tech demo and something that starts to behave like a product.

Limitations

The current version has real constraints.

First, local inference on a Galaxy S21 can take a while. That is the cost of running a multimodal model offline on a phone-class device. The app is designed to keep the user informed during that wait, but latency is still the biggest UX limitation.

Second, Iris is not a navigation or safety-critical tool. It can describe what the camera sees, but it should not be used as the only source of truth for crossing streets, avoiding hazards, or making medical decisions.

Third, Reading Mode uses Gemma 4's multimodal ability rather than a dedicated OCR engine. That keeps the architecture simple and demonstrates what the model can do, but a production version might combine Gemma 4 with a specialized OCR pipeline for speed and fidelity.

Try It Yourself

The model is sideloaded because it is large. The app expects the LiteRT-LM bundle under the app's external files directory.

Short version:

./gradlew :app:assembleDebug

adb install -r app/build/outputs/apk/debug/iris-0.1.0-debug.apk

adb push gemma-4-E2B-it.litertlm \
  /sdcard/Android/data/com.iris/files/

Model source:

https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm

The README includes the full setup notes, including Android version, memory, storage, and offline PT-BR TTS/STT requirements.

What's Next

The next improvements I would make are:

test the same build across more Android devices;
improve latency with better model/runtime configuration;
add a more explicit first-run checklist for offline language packs;
explore a hybrid Reading Mode that uses dedicated OCR when speed matters;
keep the permission model strict: no Internet unless the product direction changes openly.

Acknowledgments

The Google AI Edge team for LiteRT-LM, which makes running Gemma 4 on Android tractable.
litert-community on Hugging Face for the .litertlm model bundles.
Anthropic Claude Code was used as a pair-programming assistant during development of the Android code, the UX logic, and parts of this article.

Closing

Iris is small, but it represents the kind of app I want to see more often: local-first, accessibility-first, and built for a real language community instead of assuming English by default.

Gemma 4 made the prototype possible because it brought multimodal understanding close enough to the device. LiteRT-LM made it possible to run that loop inside Android.

The result is simple:

The camera sees. Gemma 4 understands. Iris speaks.

And it does that without sending the image anywhere.

Como habilitar a assinatura automática de commits do Git com GnuPG (GPG) no Windows

Junior Martins — Sun, 02 Apr 2023 13:45:53 +0000

Este é um guia para habilitar git commits com assinatura GPG no GitHub.

"O GnuPG é um programa de software de criptografia híbrida porque usa uma combinação de criptografia de chave simétrica convencional por questões de velocidade e criptografia de chave pública para facilitar a troca segura de chaves, geralmente usando a chave pública do destinatário para criptografar uma chave de sessão que é usada apenas uma vez. Este modo de operação faz parte do padrão OpenPGP e faz parte do PGP desde sua primeira versão."

Wikipédia

1) Instale `Gpg4win`

Gpg4win pode ser baixado em www.gpg4win.org{:target="_blank"}

O Gpg4win é um pacote do GnuPG v2, que contem:

Kleopatra, que é um gerenciador de certificados;
GNU Privacy Assitant (GPA), que é uma GUI que usa GTK + GpgOL e GpgEX, que são respectivamente uma extensão para Outlook e Windows Shell.

Como o foco deste tutorial não é demonstrar a utilização no Outlook, não iremos instalar o GpgOL, portanto, na janela de "Escolha de Componentes", deixe conforme a imagem abaixo:

Aperte o botão seguinte e depois selecione o diretório onde os arquivos do programa Gp4win ficarão (você irá precisar desta informação mais pra frente), feito isto clique em instalar.

2) Crie uma nova `key pair`

Após a instalação do Gp4win, abra o programa Kleopatra:
Na janela inicial vá ao menu File > New Key Pair..., abrirá uma nova janela, nela clique no botão Create a personal OpenPGP key pair.

Uma nova janela solicitando algumas informações será aberta, agora basta preencher os campos com os seus dados Nome e Email e marcar a caixa Protect the generated key with a passphrase.

Ainda na mesma janela clique em Advanced Settings..., na nova janela que abrir, selecione RSA, marque + RSA-, e altere os valores dos selects para 4,096 bits.

No campo Valid until: escolha uma data limite para a validade da chave que será criada, no exemplo deixei a data de 03/09/2023.

Clique em Ok e depois em Create, feito este procedimento abrirá uma nova janela para que você digite uma senha:

A senha deve ter no mínimo 08 (oito) dígitos

Após digitar a senha clique em OK e aguarde até que o sistema gere sua Key Pair.

Realizado o procedimento anterior e dando tudo certo, abrirá uma nova janela com a mensagem "Key Pair Succesfully Created" contendo algumas informações sobre a nova chave criada, conforme a imagem abaixo:

Gerada a Kei Pair, clique em Finish.

3) Copiando a chave GPG criada

Se tudo deu certo até aqui você perceberá que na janela principal do Kleopatra vai estar aparecendo as informações básicas da sua nova chave, algo parecido com a imagem abaixo:

Clique duas vezes na linha que possui a nova chave gerada para abrir a janela Export, que permitirá que exportemos a chave criada. Com a janela Export aberta, clique em Export.... Abrirá uma nova janela Export - Kleopatra, selecione todo o texto e copie Ctrl+C.

Após copiar, clique em close e depois em close novamente.

4) Inserindo a chave GPG no Github

De posse da chave copiada no "item 3" deste tutorial, vá ao GitHub e navegue pelo menu em Settings > SHH and GPG keys e na janela que abrir procure pelo botão New GPG Key

Clicando em New GPG Key, abrirá uma nova janela com o campo GPG keys/ Add new, neste campo cole todo o texto que você copiou no "item 3" deste tutorial, deixando mais ou menos assim:

Colado o texto, cliquem em Add GPG Key. Você será redirecionado para a página SSH and GPG keys, que agora conterá as informações básicas da sua nova chave GPG criada, como na imagem abaixo:

💡Atenção

Na imagem acima aparace a mensagem Unverified ao lado do e-mail inserido. Isto é um alerta indicando que o e-mail não está vinculado à sua conta do GitHub, portanto, se você inserir o e-mail correto vinculado à sua conta, a mensagem de não aparecerá

5) Configurando o Git para realizar commits verificados

Abra o terminal e digite o comando:

git config --global commit.gpgsign true

Volte na página SSH an GPG keys do GitHub e copie o valor de Key ID, o que está em azul na imagem abaixo:

O valor da sua Key ID será diferente do da imagem

Copiado o valor, volte ao terminal e digite o seguinte comando:

git config --global user.signingkey MEU_KEY_ID

Substitua MEU_KEY_ID pelo valor copiado na página "SSH an GPG keys"

Feito, agora digite o comando:

git config --global gpg.program 'Disco:/caminho/do/GnuPG/bin/gpg.exe`

🏷️Exemplo:

git config --global gpg.program 'C:/programs/GnuPG/bin/gpg.exe`

💡 Atenção
Use o caminho completo utilizando / e não \

6) Testando o comando

Se deu tudo certo a partir de agora você será capaz de realizar commits verificados para sua conta no GitHub, para isso, faça um commit utilizando a flag -S, assim:

git commit -S -m 'Commit verificado'

Ao clicar em enter abrirá uma nova janela solicitando a senha que foi criada no momento da geração da chave no Kleopatra. Digite a senha correta e tecle enter, que o commit será realizado.

Para finalizar, depois do commit, dê um push e seja feliz 😁

git push

Seus commits aparecerão no histórico com uma tag verified ao lado, conforme a imagem abaixo:

7) Habilitando no WSL2

Para habilitar a assinatura automática de commits do Git com GnuPG (GPG) no Windows Subsystem for Linux (WSL), siga os passos abaixo:

7.1 - Instale o GnuPG no WSL: Abra um terminal do WSL e execute o seguinte comando para instalar o GnuPG:

sudo apt update
sudo apt install gnupg

Isso irá instalar o GnuPG no seu ambiente WSL.

7.2 - Gere suas chaves GPG: Para assinar commits automaticamente, você precisa ter uma chave GPG. Se você já possui uma chave GPG, você pode pular esta etapa. Caso contrário, você pode gerar uma nova chave GPG usando o seguinte comando:

gpg --gen-key

Siga as instruções do GnuPG para gerar uma nova chave GPG. Você precisará definir uma senha para sua chave GPG durante o processo.

7.3 - Configure o Git para usar a chave GPG: Após gerar sua chave GPG, você precisa configurar o Git para usá-la. Para fazer isso, execute os seguintes comandos no terminal do WSL:

git config --global user.signingkey <sua_chave_gpg>
git config --global commit.gpgsign true
git config --global gpg.program gpg

Substitua <sua_chave_gpg> pelo ID da chave GPG que você gerou na etapa anterior.

7.4 - Exporte sua chave GPG pública: No terminal do WSL, você pode exportar sua chave GPG pública usando o seguinte comando:

gpg --armor --export <seu_ID_de_chave> > chave_gpg_publica.asc

7.5 - Substitua <seu_ID_de_chave> pelo ID da sua chave GPG que você deseja adicionar ao GitHub. Isso irá criar um arquivo com extensão ".asc" que contém a sua chave GPG pública.
7.6 - Importe sua chave GPG no WSL: Você também precisa importar sua chave GPG no WSL para que o Git possa encontrar e usar sua chave para assinar os commits automaticamente. Para importar a chave, você pode usar o seguinte comando:

gpg --import <caminho_para_sua_chave_gpg>

Exemplo
gpg --import chave_gpg_publica.asc

7.7 - Substitua <caminho_para_sua_chave_gpg> pelo caminho completo para o arquivo da chave GPG que você exportou ou recebeu de outra fonte.
7.8 - Configure sua variável de ambiente GPG_TTY: Para que a assinatura automática de commits funcione corretamente no WSL, você precisa configurar a variável de ambiente GPG_TTY. Você pode fazer isso adicionando o seguinte comando ao seu arquivo de perfil do shell (por exemplo, ~/.bashrc ou ~/.zshrc):

export GPG_TTY=$(tty)

Isso permitirá que o GnuPG encontre o terminal correto para exibir os prompts de senha quando necessário.

Adicionando a chave do WSL ao Github

Para adicionar sua chave GPG ao GitHub, você pode seguir os passos abaixo:
Copie o conteúdo do arquivo de chave pública: Abra o arquivo de chave pública gerado (chave_gpg_publica.asc) em um editor de texto ou em um visualizador de arquivos e copie todo o conteúdo do arquivo.
Copiada a chave siga o procedimento listado no passo 4) Inserindo a chave GPG no Github deste tutorial.

Remix :: CRUD com Supabase - Parte 06 - Testando a inserção de novos registros

Junior Martins — Wed, 18 May 2022 20:32:41 +0000

Nesta parte iremos testar se o nosso formulário está funcionando.

Vamos editar novamente o arquivo index.tsx e colocar o nosso menu que irá para área de postagens, onde iremos visualizar e inserir novas postagens

Re-editando o arquivo `index.tsx`

Abra seu arquivo routes/index.tsx, apague os imports e importe apenas o componente Link do Remix:

import { Link } from 'remix'

Agora edite o componente Index, deixando-o assim:

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <ul
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'row',
          gap: '8px',
        }}
      >
        <li>
          <Link
            to={'posts'}
            style={{
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Visualizar Posts
          </Link>
        </li>
      </ul>
    </div>
  )
}

Por último, vamos adicionar um componente ErrorBoundary para "capturar" os erros na Index de forma que não quebre o resto da aplicação.

export function ErrorBoundary({ error }: { error: Error }) {
  return (
    <div className='error-container'>
      <h1>😱 App Error</h1>
      <pre>❗ {error.message}</pre>
    </div>
  )
}

Testando a aplicação

Finalmente estamos prontos para testar a nossa aplicação, para isto rode npm run dev e se tudo deu certo você verá no navegador algo parecido com a imagem abaixo:

Clique no link Visualizar Posts e você será direcionado para a página de visulização, que também será nossa página de inseração de novos posts.

A página que será aberta deve ser algo parecido com a imagem abaixo:

Clique no botão Novo e repare que o formulário abrirá logo acima da visualização dos posts e isto se deve a mágica do componente <Outlet/> que inserimos na parte 05 enquanto estávamos editando o componente Posts.

Clique em novo, preencha todos os dados e depois clique em enviar. Se tudo deu certo até aqui, um novo post aparecerá abaixo dos botões Home e Novo.

Com isto finalizamos esta primeira parte do tutorial, na parte 07 instalaremos a lib https://chakra-ui.com/ para melhorar a aparência da nossa aplicação. Te vejo lá! 😉

Remix :: CRUD com Supabase - Parte 05 - Trabalhando com formulário

Junior Martins — Wed, 18 May 2022 20:32:25 +0000

Nesta parte veremos o quanto é fácil trabalhar com formulários no Remix, iremos melhorar nossa estrutura de arquivos, colocando as coisas nos lugares certos para evitar código duplicado e permitir assim o reaproveitamento na nossa aplicação.

🎲 Criando o modelo

Nas partes anteriores deste tutorial nós criamos a PostModel nos arquivos onde ele era necessário, mas agora iremos deixá-lo em lugar onde "quem precisar" na aplicação possa usá-lo, portanto, crie o arquivo posts.model.ts dentro da pasta app/models/, de forma que ele fique assim: app/models/posts.model.ts. Edite-o e deixe desta forma:

export type PostsModel = {
  post_id?: number
  post_uuid?: string
  post_author: string
  post_title: string
  post_text: string
  post_situation?: string
  post_created_at?: string
}

Criando a API

Criado o modelo, podemos agora trabalhar com a API, que armazenará todas as ações que permitirão executar nosso CRUD, para isto, crie o arquivo supabase-api.ts dentro do diretório app/api/, de forma que fique assim: app/api/supabase-api.ts.

Edite o arquivo supabase-api.ts e import o PostsModels e o cliente supabase, deixando-o assim:

import { PostsModel } from '~/models/posts.model'
import { supabase } from '~/utils/supabase-client.server'

Ainda no supabase-api.ts. crie a função getPosts, que ficará encarregada de realizar um select no Supabase para nós.

const getPosts = async () => {
  const { data: posts } = await supabase
    .from<PostsModel>('posts')
    .select('*')
    .order('post_id', { ascending: false })

  return posts
}

Agora criaremos a função addPost, que ficará responsável por adicionar um registro novo.

const addPost = async ({ post_author, post_title, post_text }: PostsModel) => {
  const { data, error } = await supabase.from<PostsModel>('posts').insert([
    {
      post_author: post_author,
      post_title: post_title,
      post_text: post_text,
    },
  ])

  return { data, error }
}

Por fim, exporte as duas funcões:

export { getPosts, addPost }

Criando a rota `posts`

Crie dentro da pasta routes um arquivo com nome posts.tsx e dentro dele faça os seguintes imports:

import { Link, LoaderFunction, Outlet, useLoaderData } from 'remix'
import { getPosts } from '~/api/supabase-api'
import { PostsModel } from '~/models/posts.model'

Link para criarmos o link que irá chamará o formulário para iserir um novo registro;
LoaderFunction para tiparmos o método loader que ficará responsável por chamar a função getPosts, que carrega os registros do banco de dados;
useLoaderData permite façamos o uso dos dados carregados pelo loader;
Outlet, este componente é um wrapper em torno do Outlet do React Router com a capacidade de passar o estado da interface do usuário para rotas aninhadas. Ou seja, com ele será possível carregar a rota filha que conterá o fomulário dentro da rota pai posts.tsx;
getPosts é a função que carrega os registros do banco de dados; e
postModels é o type model dos dados que virão do banco de dados.

Feito as importações criaremos o método loader para chamar a getPosts:

export const loader: LoaderFunction = async () => {
  const posts = await getPosts()

  return posts
}

Agora iremos criar nosso componente Posts:

export default function Posts() {
  const posts = useLoaderData<PostsModel[]>()

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <ul
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'row',
          gap: '8px',
        }}
      >
        <li>
          <a
            href='/'
            style={{
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Home
          </a>
        </li>
        <li>
          <Link
            to={'new'}
            style={{
              textDecoration: 'none',
              backgroundColor: '#62efd0',
              color: '#0d6443',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Novo
          </Link>
        </li>
      </ul>
      <div>
        <Outlet />
      </div>
      <div>
        <ul style={{ listStyle: 'none' }}>
          {posts?.map(post => (
            <li key={post.post_uuid}>
              <h3>{post.post_title}</h3>
              <small>{post.post_author}</small>
              <blockquote>{post.post_text}</blockquote>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

E, por fim, chamaremos a função ErrorBoundary do Remix, a qual permite que os erros sejam capturados dentro da rota que foi chamada, evitando assim que toda a aplicaçãose quebre:

export function ErrorBoundary({ error }: { error: Error }) {
  return (
    <div className='error-container'>
      <h1>😱 App Error</h1>
      <pre>❗ {error.message}</pre>
    </div>
  )
}

Criando a página do fomulário

Criado a página de listagem dos posts, iremos criar a página que conterá o fomulário que permitirá que a gente insira novos registros, para isto crie a pasta posts dentro de routes, de forma que fique routes/posts. Dentro da pasta posts crie o arquivo new.tsx e faça as seguintes imports:

import { ActionFunction, Link, redirect } from 'remix'
import { supabase } from '~/utils/supabase-client.server'

ActionFunction para tiparmos o método do Remix chamado action que é reponsável por "capturar" as variáveis enviadas pelo fomulário. Na verdade action pega todas varáveis de qualquer request na rota onde ele está.
redirect permite que a rota seja redirecionada
supabase é o nosso cliente do Supabase

Feito os imports, chamaremos o método action:

export const action: ActionFunction = async ({ request }) => {
  const inputs = Object.fromEntries(await request.formData())

  await supabase.from('posts').insert([inputs])

  return redirect('.')
}

Agora criaremos o componente NewPost que conterá nosso formulário:

export default function NewPost() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Novo post</h1>
      <form
        action='#'
        method='post'
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
        }}
      >
        <div>
          <label htmlFor=''>Título</label>
          <br />
          <input type='text' name='post_title' />
        </div>
        <div>
          <label htmlFor=''>Autor</label>
          <br />
          <input type='text' name='post_author' />
        </div>
        <div>
          <label htmlFor=''>Texto</label>
          <br />
          <textarea
            name='post_text'
            id='post_text'
            cols={30}
            rows={10}
          ></textarea>
        </div>
        <div>
          <button
            type='submit'
            style={{
              backgroundColor: '#62a4ef',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              border: 'none',
              lineHeight: '1.4',
              fontSize: '14px',
              cursor: 'pointer',
            }}
          >
            Enviar
          </button>
          <Link
            to={'/posts'}
            style={{
              marginLeft: '10px',
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Cancelar
          </Link>
          <br />
        </div>
      </form>
    </div>
  )
}

Com isto finalizamos o formulário e na parte 06 iremos criar nosso primeiro post através do formulário criado. Te espero lá! 😉

Remix :: CRUD com Supabase - Parte 04 - Carregando e inserindo novos registros

Junior Martins — Wed, 18 May 2022 20:31:27 +0000

Nesta parte do tutorial verificaremos se a nossa comunicação com API do Supabase está funcionando corretamente e criaremos uma rota temporária que permitirá criar novos registros para testarmos as requisições.

Editando o arquivo `app/index.tsx`

Neste primeiro momento iremos verificar se a nossa conexão com o Supase está funcionando e para isto editaremos o arquivo routes/index.tsx responsável por chamar a rota index da nossa aplicação.

1) Importe LoaderFunction e useLoaderData do Remix

import { LoaderFunction, useLoaderData } from 'remix'

O que é o método `loader: LoaderFunction`?

O loader é uma função executada em server-side e é ela que usamos no Remix para obter dados externos, portanto a usaremos para obter os registros que virão do banco de dados.

Que é o hook `useLoaderData`?

O useLoaderData é um hook provido pelo próprio Remix para que se possa ter acesso ao que é exportado pelo loader

2) Importe também o cliente do Supabase

import { supabase } from '~/utils/supabase-client.server'

3) Crie o tipo PostsModel, que além de tipar as nossas variáveis, vai nos ajudar muito no intelisense do VSCode.

type PostsModel = {
  post_id: number
  post_uuid: string
  post_author: string
  post_title: string
  post_text: string
  post_situation: string
  post_created_at: string
}

4) Agora, iremos dar um select no Supabase para carregar as informações dos registros no loader:

export const loader: LoaderFunction = async () => {
  const { data: posts } = await supabase
    .from<PostsModel>('posts')
    .select('*')
    .order('post_id', { ascending: false })

  return posts
}

5) Deixe o componente Index desta forma:

export default function Index() {
  const posts = useLoaderData<PostsModel[]>()

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <p>
        <a href='/insert'>Inserir</a>
      </p>
      <ul style={{ listStyle: 'none' }}>
        {posts?.map(post => (
          <li key={post.post_uuid}>
            <h3>{post.post_title}</h3>
            <small>{post.post_author}</small>
            <blockquote>{post.post_text}</blockquote>
          </li>
        ))}
      </ul>
    </div>
  )
}

Para ver se tudo deu certo, rode o comando npm run dev e você perceberá que irá aparecer apenas o título Blog Remix com Supabase, pois não há nenhum registro inserido na base de dados.

Repare que foi criado um link insert logo abaixo do título Blog Remix com Supabase, se clicarmos nele agora seremos direcionados para uma página que não existe ainda e, inevitavelmente, receberemos um erro 404, mas isto será resolvido nos próximos passos.

Criando a Rota temporária `insert`

Para testar e ver se a nossa comunicação com Supabase está realmente funcionando e se nosso loader está trazendo as informações dos registros, faremos antes um insert para escrever alguns registros no Supabase, que poderão ser apagados posteriormente, então, mãos a obra.

Aditivo: Nesta parte muito código será duplicado, mas não se preocupe, por enquanto faremos funcionar pra depois deixar mais limpo.

1) Crie dentro da pasta routes um arquivo com o nome insert.tsx e faça os mesmos imports que fizemos em index, ou seja:

import { LoaderFunction, useLoaderData } from 'remix'
import { supabase } from '~/utils/supabase-client.server'

2) Da mesma forma que na index, crie o type PostsModel:

type PostsModel = {
  post_id: number
  post_uuid: string
  post_author: string
  post_title: string
  post_text: string
  post_situation: string
  post_created_at: string
}

3) Chame o método loader, mas agora dando um insert no Supabase:

export const loader: LoaderFunction = async () => {
  const { data } = await supabase.from('posts').insert([
    {
      post_author: 'Junior Martins',
      post_title: 'O título da sua aplicação',
      post_text: 'Uma coisa é certa: ninguém sai vivo dessa vida.. Por que "tudo junto" se escreve separado e "separado" se escreve tudo junto?. Se tamanho fosse documento o elefante era dono do circo.. Não concordo nem discordo, muito pelo contrário. Em rio de piranhas, jacaré nada de costas. Um é pouco, dois é bom e três é ímpar. Um é pouco, dois é bom e três é ímpar. O sonho não acabou. E ainda temos pão doce, maria-mole e queijadinha. Uma coisa é uma coisa, outra coisa é outra coisa.',
    },
  ])

  return data?.[0]
}

Aditivo: Você pode alterar o valor de post_author, post_title e post_text dentro do método loader para diferenciar os registros.

4) Crie o componente Insert:

export default function Insert() {
  const post = useLoaderData<PostsModel>()

  return (
    <>
      <h1>Novo registro inserido</h1>
      <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
        <h3>{post.post_title}</h3>
        <p>
          <small>{post.post_author}</small>
        </p>
        <blockquote>{post.post_text}</blockquote>
      </div>
    </>
  )
}

Para finalizar, inicie sua aplicação e clique no link inserir você irá visualizar uma mensagem informando que um novo registro foi inserido e logo abaixo os dados que foram inseridos. Clique agora em Home e irá ver que o nosso novo post foi listado, faça este processo algumas vezes pra ver que realmente um novo registro está sendo inserido.

Na parte 05, iremos melhorar o código e criar um formulário para fazer esta inserção com dados que a gente definir. Te vejo lá! 😉

Remix.run :: CRUD com Supabase - Parte 03 - Configurando o Supabase Client no Remix

Junior Martins — Tue, 26 Apr 2022 13:45:42 +0000

Nesta parte do tutorial iremos criar a configuração que nos permitirá conectar com a API do Supabase.

📑 Criando o arquivo `.env`

Passo 01

1) Vá ao Dashboard do Supabase (https://app.supabase.io/) e entre no seu projeto Remix Blog Supabase
2) Na barra lateral, clique no menu Settings (⚙️), depois em API e deixe a janela aberta
3) Vá até a raiz do seu projeto.

Passo 02

Na raiz do projeto crie o arquivo .env com as seguintes variáveis:

SUPABASE_URL; e
SUPABASE_KEY.

Passo 03 - definindo o valor da variável `SUPABASE_KEY`

1) Na janela do Dashboard do Supabase, aquela que deixamos aberta, observe que dentro do formulário Project API Keys existe o campo anon public, clique no botão copy para capturar o valor dele
2) Agora cole o valor copiado para a variável SUPABASE_KEY no seu arquivo .env.

Passo 04 - definindo o valor da variável `SUPABASE_URL`

Ainda no Dashboard do Supabase observe que existe o formulário Configuration. Agora precisamos copiar o valor do campo URL, para isto clique no botão copy e cole o valor copiado para a variável SUPABASE_URL no seu arquivo .env.

Se tudo foi feito corretamente seu arquivo .env deverá ficar parecido com algo assim:

SUPABASE_URL='https://asxwozcalashinicovpv.supabase.co'
SUPABASE_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJpc3MiOiAic3VwYWJhc2UiLAogICJyZWYiOiAiYXN4d296Y2FsYXNoaW5pY292cHYiLAogICJyb2xlIjogImFub24iLAogICJpYXQiOiAxNjQ3NzAyMTkxLAogICJleHAiOiAxOTYzMjc4MTkxCn0=.MTPNt7yEGWOvkORubeHDlvEGfH8ZAZcuHq5T878Foec'

*Os dados acima são fictícios, portanto não irão funcionar no seu projeto, substitua os dados com os seus! 😀

⚡️ Criando o cliente do Supabase

Dentro da pasta app, crie uma subpasta como o nome utils e dentro dela crie o arquivo supabase-client.server.ts, que ficará assim:

//supabase-client.server.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env?.SUPABASE_URL as string
const supabaseKey = process.env?.SUPABASE_KEY as string

export const supabase = createClient(supabaseUrl, supabaseKey)

Pronto, nossa conexão com o banco de dados já está pronta, na parte 04 iremos iniciar nosso CRUD propriamente dito.

em breve!

Parte 04 - Carregando e inserindo novos registros
Parte 05 - Trabalhando com formulário
Parte 06 - Testando a inserção de novos registros

Remix.run :: CRUD com Supabase - Parte 02 - Instalando o Supabase

Junior Martins — Tue, 26 Apr 2022 13:37:56 +0000

Introdução

Nesta parte do tutorial daremos início a configuração da nossa base de dados na página do Supabase e nos final faremos a instalação do supabase-js.

Mas afinal, o quê é o Supabase?

De acordo com a própria página do Supabase ele é uma alternativa de código aberto ao Firebase. Onde, através dele é fornecido todos os serviços necessários para criar o back-end de um produto. Fornecendo:

Base de dados em Postgres;
Autenticação com gerenciamento de usuários;
Aramazenamento de arquivos; e
Fornecimento de uma API instantânea

Criando a base de dados no Supabase

Acesse o link https://app.supabase.io/ e logue com sua conta do GitHub clicando no botão Sign In with GitHub, conforme a imagem abaixo:

Será solicitado que você dê autorização, clique no botão Autorize supabase, conforme a imagem abaixo:

Feito o login, clique no botão New project, será solicitado que você selecione uma organização.

Por default o Supabase cria a organização com o usuarioGitHub's Org

Após selecionar a organização aperecerá um formulário para que você preencha os dados do seu projeto Supabase, conforme a imagem abaixo:

Preencha os campos do formulário da seguinte forma:

Name: Remix Blog com Supabase
Database password: crie a senha que você quiser > Region: Para o meu caso o sistema indicou East US (North Virgínia) > Princing Plan: Free tier

Preenchido os campos, clique em Create new project e aguarde o Supabase acabar de criar seu projeto.

Na janela que será aberta (Project Building) você já terá algumas informações importantes do seu projeto, como Project API Keys e Project Configuration, as quais não iremos utilizar agora.

Criando a nossa tabela do Blog

O Dashboard do Supabase possui um menu lateral onde ficam os links que irão direcionar para os serviços que são disponibilizados:

Clique no menu Table editor e depois em Create new table. No formulário que será aberto preencha com:

Name: posts
Description: Posts do nosso Blog

E adicione as colunas abaixo clicando em add column:
Particularmente, eu gosto de adicionar sufixos aos nomes dos campos das minhas tabelas. É um gosto pessoal, pois acho mais descritivo. Você é livre para criar os campos com os nomes da forma que você quiser. 😉

A tabela `posts` ficará assim:

name	type	Default value	Primary
post_id	int8		checked
post_uuid	uuid	uuid_generate_v4()
post_author	text
post_title	text
post_text	text
post_situation	varchar	A
post_created_at	timestamptz	now()

Adicionados os campos, clique em create. Se tudo estiver corrido bem a tabela posts aparecerá em Table editor.

Instalando o Supabase no nosso projeto

Vá até a pasta raiz do projeto, onde o remix-supabase foi criado e rode o comando:

npm i -E @supabase/supabase-js

Este comando instalará o cliente do supabase na nossa aplicação.

Na parte 03 iremos criar o nosso cliente Supabase na nossa aplicação. Te vejo lá! 😉

em breve!

Parte 04 - Carregando e inserindo novos registros
Parte 05 - Trabalhando com formulário
Parte 06 - Testando a inserção de novos registros

Remix.run :: CRUD com Supabase - Parte 01 - Criando o projeto

Junior Martins — Tue, 26 Apr 2022 13:32:27 +0000

Introdução

Olá! Neste tutorial você aprenderá como fazer um CRUD completo usando Remix e Supabase. Iremos abordar desde a instalção da aplicação com Remix, passando pela criação de uma conta no Supabase, criação de tabelas e configuração para comunicação com a API até a criação de um formulário que permitirá a inserção de novos registros.

Faremos um CRUD completo com estas duas ferramentas maravilhosas e que sou suspeito de falar, mas não consigo ver você não se apaixonando ao término de passo-a-passo.

Techs utilizadas

Pré-requisitos

Uma conta no GitHub
Node.js 14 ou superior
npm 7 ou superior
Um editor de código de sua preferência, aqui utilizaremos o VSCode

1. Iniciando o projeto

O primeiro passo que iremos dar será criar nosso projeto e para isto utilizaremos o comando:

npx create-remix@latest

O comando iniciará o setup que criará sua aplicação Remix, deixe as respostas assim:

Need to install the following packages:
create-remix@latest
Ok to proceed? (y) y

? Where would you like to create your app? (./my-remix-app): remix-supabase
? What type of app do you want to create? (Use arrow keys): Just the bascis
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. (Use arrow keys): Remix App Server
? TypeScript or JavaScript? (Use arrow keys): Typescript
? Do you want me to run 'npm install'? (Y/n) Y

Finalizada a instalação, abra o projeto criado com o editor de sua preferência:

Se assim como eu, você estiver utilizando o VSCode, basta digitar os comandos abaixo:

> cd remix-supabase
> code .

2. Testando se tudo foi criado corretamente

Para testar se sua aplicação REMIX foi criada de forma correta rode o comando:

npm run dev

Deve aparecer a seguinte mensagem no terminal:

> dev
> remix dev

Watching Remix app in development mode...
💿 Built in 1.4s
Remix App Server started at http://localhost:3000

Acesse http://localhost:3000 e veja que existe um app Remix rodando, conforme a imagem abaixo:

3. Estrutura do projeto Remix

O Remix criará várias pastas no seu projeto, mas a mais importante e que iremos trabalhar será a pasta app, que é onde toda a mágica acontece. Dentro da pasta app você encontrará a pasta routes, que é onde ficam as rotas da nossa aplicação. A pasta routes é primoridal, pois ela é o cerne de tudo e é nela que toda simplicidade do Remix ganha força.

Na parte 02 criaremos a nossa base de dados no Supabase e faremos a instalação do supabase-js na nossa aplicação. Te vejo lá! 😉

em breve!

Parte 04 - Carregando e inserindo novos registros
Parte 05 - Trabalhando com formulário
Parte 06 - Testando a inserção de novos registros

DEV Community: Junior Martins

Iris: an offline visual assistant in Brazilian Portuguese powered by Gemma 4

What I Built

Demo

Code

Why This App Needed To Be Offline

How I Used Gemma 4

Architecture

1. Frame quality checks before inference

2. Sentence streaming into TTS

3. Modes are prompt engineering exposed as UI

4. TalkBack-aware behavior

Performance on the Galaxy S21

What Gemma 4 Unlocked

What Was Hard

Limitations

Try It Yourself

What's Next

Acknowledgments

Closing

Como habilitar a assinatura automática de commits do Git com GnuPG (GPG) no Windows

1) Instale Gpg4win

2) Crie uma nova key pair

3) Copiando a chave GPG criada

4) Inserindo a chave GPG no Github

5) Configurando o Git para realizar commits verificados

🏷️Exemplo:

6) Testando o comando

7) Habilitando no WSL2

Adicionando a chave do WSL ao Github

Remix :: CRUD com Supabase - Parte 06 - Testando a inserção de novos registros

Re-editando o arquivo index.tsx

Testando a aplicação

Remix :: CRUD com Supabase - Parte 05 - Trabalhando com formulário

🎲 Criando o modelo

Criando a API

Criando a rota posts

Criando a página do fomulário

Remix :: CRUD com Supabase - Parte 04 - Carregando e inserindo novos registros

Editando o arquivo app/index.tsx

O que é o método loader: LoaderFunction?

Que é o hook useLoaderData?

Criando a Rota temporária insert

Remix.run :: CRUD com Supabase - Parte 03 - Configurando o Supabase Client no Remix

📑 Criando o arquivo .env

Passo 01

Passo 02

Passo 03 - definindo o valor da variável SUPABASE_KEY

Passo 04 - definindo o valor da variável SUPABASE_URL

⚡️ Criando o cliente do Supabase

em breve!

Remix.run :: CRUD com Supabase - Parte 02 - Instalando o Supabase

Introdução

Mas afinal, o quê é o Supabase?

Criando a base de dados no Supabase

Criando a nossa tabela do Blog

A tabela posts ficará assim:

Instalando o Supabase no nosso projeto

em breve!

Remix.run :: CRUD com Supabase - Parte 01 - Criando o projeto

Introdução

Techs utilizadas

Pré-requisitos

1. Iniciando o projeto

2. Testando se tudo foi criado corretamente

3. Estrutura do projeto Remix

em breve!

1) Instale `Gpg4win`

2) Crie uma nova `key pair`

Re-editando o arquivo `index.tsx`

Criando a rota `posts`

Editando o arquivo `app/index.tsx`

O que é o método `loader: LoaderFunction`?

Que é o hook `useLoaderData`?

Criando a Rota temporária `insert`

📑 Criando o arquivo `.env`

Passo 03 - definindo o valor da variável `SUPABASE_KEY`

Passo 04 - definindo o valor da variável `SUPABASE_URL`

A tabela `posts` ficará assim: