DEV Community: Norberto Krucheski

Hice una app de escritorio para procesar imágenes — sin nube, sin cuenta, todo local

Norberto Krucheski — Thu, 26 Feb 2026 18:11:39 +0000

Cada vez que necesitaba convertir una imagen a WebP, redimensionar o sacarle los metadatos EXIF, terminaba en alguna página random que te pide subir el archivo a un servidor. Tus fotos viajando a quién sabe dónde, para una operación que cualquier computadora moderna puede hacer en milisegundos.

Me cansé de eso y armé Pixora: una app de escritorio, open source, que procesa imágenes 100% en tu máquina. Sin internet, sin cuenta, sin nube.

NorbertOSK / pixora

Pixora

Local-first image processing. No cloud. No account.

🇺🇸 English | 🇪🇸 Español | 🇧🇷 Português

Pixora is a free, open-source desktop app for image processing. Convert formats, resize, remove backgrounds with AI, and strip metadata — all 100% locally on your machine, with no internet required after setup.

app.mp4

Built by Norberto Krucheski.

Download

Installers are automatically built for every release via GitHub Actions.

Platform	Download
Windows	⬇ Download for Windows (.exe)
macOS (Apple Silicon M1 or higher)	⬇ Download for macOS (.dmg)
Linux	⬇ Download for Linux (.AppImage / .deb)

Just download, install, and run — no account, no setup, no cloud.

Features

Feature	Details
Format Conversion	Convert between WebP, JPEG, and PNG
Quality Control	Adjustable quality slider (1–100%)
Smart Resize	10 built-in presets (hero, blog, avatar, 4K…) + custom dimensions. Aspect ratio always preserved.
EXIF & Metadata	View full metadata (camera, GPS, date, exposure…) and strip

…

View on GitHub

Qué hace

Conversión de formato — WebP, JPEG, PNG, con un slider de calidad
Redimensionar — 10 presets (hero, blog, avatar, 4K) o dimensiones custom. Siempre preserva el aspect ratio
Ver y eliminar metadatos EXIF — cámara, GPS, fecha, todo
Remover fondo con IA — modelo ONNX local, sin API key, funciona offline
Procesamiento masivo — arrastrás un montón de imágenes y las procesa en paralelo. Exportás todo como ZIP
Vista antes/después — slider interactivo para comparar el resultado

Todo esto funciona sin conexión a internet (después de la primera descarga del modelo de IA).

Por qué Tauri 2 + Rust en vez de Electron

Electron es genial para muchas cosas, pero para procesar imágenes necesitaba velocidad real. No "velocidad aceptable", sino que un batch de 8 fotos pesadas no trabe la interfaz.

Tauri 2 me dejó combinar lo mejor de dos mundos:

El frontend es React 18 con TypeScript. Toda la UI, los paneles, la grilla de imágenes, el slider antes/después. React maneja el estado y los re-renders, pero nunca toca un archivo de imagen directamente.
El backend es Rust puro. Resize con filtro Lanczos3, conversión de formatos, limpieza de EXIF recodificando desde cero, inferencia del modelo ONNX para remover fondos, y creación de ZIPs. Todo compilado a código nativo.

Rust corre a velocidad de C sin garbage collector. Sin pausas, sin demoras random. Las imágenes se procesan en paralelo usando un pool de workers dimensionado a los núcleos del CPU. En un Mac con chip M, procesar 8 imágenes tarda prácticamente lo mismo que procesar 1.

El detalle técnico que más me costó

La comunicación entre React y Rust pasa por un canal IPC que expone Tauri. La primera idea obvia fue: pasar la imagen como base64 por ese canal. Funciona, pero bloquea el thread de JavaScript en cada llamada. Con una imagen grande se nota. Con un batch de 10, la UI se congela.

La solución fue cambiar el enfoque: todo el procesamiento corre en Rust, y al frontend solo le devuelvo la ruta de un archivo temporal. Menos de 200 bytes viajando por el IPC en vez de megabytes de base64. La interfaz lee ese archivo una sola vez para mostrarlo.

Parece un cambio chico, pero fue lo que hizo que el procesamiento masivo funcione sin que la app se trabe.

Remoción de fondo con IA — offline

Esto es lo que más me gustó implementar. Usa IS-Net, un modelo ONNX cuantizado que pesa ~42 MB. Se descarga la primera vez que lo usás y después funciona completamente offline.

La inferencia corre en ONNX Runtime para Rust (ort crate), directamente en CPU. No necesitás API key, no necesitás GPU, no necesitás nada externo.

El modelo se cachea en:

Sistema	Ubicación
macOS	`~/Library/Application Support/pixora/`
Windows	`%LOCALAPPDATA%\pixora\`
Linux	`~/.local/share/pixora/`

Stack completo

Capa	Tecnología
Desktop	Tauri 2 (Rust + WebView nativo)
Frontend	React 18 + TypeScript
Bundler	Vite 5
Estilos	Tailwind CSS
Estado	Zustand
Imágenes	`image` crate (resize, compress, convert)
Metadatos	`kamadak-exif`
IA	`ort` (ONNX Runtime) + IS-Net
ZIP	`zip` crate

Probalo

Hay instaladores listos para descargar:

Windows — .exe
macOS (Apple Silicon) — .dmg
Linux — .AppImage / .deb

Descargá la última versión acá

O si preferís compilar desde el código fuente:

git clone https://github.com/NorbertOSK/pixora.git
cd pixora
bun install
bun start

La primera vez tarda unos minutos porque compila el backend de Rust. Después arranca rápido.

Privacidad

Tus imágenes nunca salen de tu máquina. No hay servidor, no hay telemetría, no hay analytics. El modelo de IA se descarga una sola vez y listo.

Si te resulta útil, una estrellita en el repo ayuda un montón 😁

NorbertOSK / pixora

Pixora

Local-first image processing. No cloud. No account.

🇺🇸 English |
🇪🇸 Español |
🇧🇷 Português

app.mp4

Built by Norberto Krucheski.

Download

Installers are automatically built for every release via GitHub Actions.

Platform	Download
Windows	⬇ Download for Windows (.exe)
macOS (Apple Silicon M1 or higher)	⬇ Download for macOS (.dmg)
Linux	⬇ Download for Linux (.AppImage / .deb)

Just download, install, and run — no account, no setup, no cloud.

Features

Feature	Details
Format Conversion	Convert between WebP, JPEG, and PNG
Quality Control	Adjustable quality slider (1–100%)
Smart Resize	10 built-in presets (hero, blog, avatar, 4K…) + custom dimensions. Aspect ratio always preserved.
EXIF & Metadata	View full metadata (camera, GPS, date, exposure…) and strip

…

View on GitHub

Mobile First - React Styled-Components - CSS Grid

Norberto Krucheski — Thu, 02 Sep 2021 01:13:49 +0000

A la hora de comenzar un proyecto web, ya sea una app o un sitio, si el mismo debe ser responsive, generalmente puede surgir la pregunta; ¿en que resolución comenzar el proyecto?.

Como su nombre lo indica mobile first «los móviles primero», resume perfectamente esta filosofía de diseño.

Se refiere a un modo de diseñar que tenga en cuenta, en primera instancia, un dispositivo móvil.

A la hora de diseñar, podemos optar por usar frameworks como; Boostrap, Tailwind (el mejor 😁), o hacerlo de forma manual.

En esta guía quiero enseñarte una forma sencilla de encarar el diseño utilizando CSS Grid, Areas y Templates, una vez que definimos la maqueta de nuestro sitio, se puede hacer un diseño responsive de forma muy sencilla.

Queremos lograr una diseño responsive como este:

Para comenzar creamos un proyecto de react y luego instalamos styled-components.

npm create-react-app first-mobile

npm install --save styled-components

Ejecutamos nuestro proyecto:

npm start

Lo primero que vamos hacer es eliminar los archivos que no utilizamos:

App.css
App.test.js
logo.svg
reportWebVitals.js

NOTA: El archivo index.css trae unos estilos por defecto para react, estos los utilizaremos con styled-components y luego borraremos el archivo.

Editamos los archivos index.js y App.js para que no nos de errores, deben de quedar así:

App.js

index.js

Temas que vamos a ver:

React con Styled-Components
CSS Grid + Grid Area

React con Styled-Components

Este módulo nos permite estilizar nuestros componentes, se considera buenas practicas definir a que componente le corresponde que estilo.

Lo mejor de styled-componentes, es que nos permite escribir nuestro CSS de toda la vida, pero también es posible combinarlo con framworks como Tailwind.

Otra ventaja de styled-componentes; es que nos genera clases automáticas, y es imposible que nuestras clases entren en conflicto entre ellas.

Vamos a comenzar con escribir los estilos globales para toda la app (lo que teníamos en index.css).

Para hacerlo de una forma mas ordenada, crearemos dentro de la carpeta src, una carpeta llamada styles.

Creamos un archivo llamado globalStyles.js, importamos createGlobalStyle para crear estilos globales.

Creamos un componente llamado GlobalStyle, donde entre bastics (esa comillas simples invertidas) pegamos el cógido de index.css (luego podemos borrar el index.css).

import {createGlobalStyle} from 'styled-components'

export const GlobalStyle = createGlobalStyle`

//Estilos por defecto que trae React
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Importamos este componente en el nivel mas alto de la app, en nuestro caso en App.js, debe quedar así:

Ahora vamos escribir los componentes para maquetar nuestro sitio y se vea de esta forma:

Pero vamos hacerlo directamente con styled-components.
Dentro de la carpeta styles, creamos otro archivos llamados model.js, (la idea es modelar el sitio).

Importamos styled de styled-componentes, y generamos nuestro primer componente estilizado.

Como se puede ver, se crea un componente (Mayúscula), y de styled utilizamos un div.

Styled = contiene todas las etiquetas HTML.

Vamos a proceder a crear el resto de componentes.

import styled from 'styled-components'

export const Container = styled.div`
width: 90%;
max-width: 1000px;
margin:20px auto;
`

export const Header = styled.header`
background: blue;
color: #fff;
`

export const Main = styled.main`
padding-left: 2%;
`

export const Sidebar = styled.aside`
background: orange;
min-height: 100px;
`

export const Widget = styled.div`

background: orchid;
height: 100px;
`

export const Footer = styled.footer`
padding: 20px;
background: maroon;
color: #fff;`

Ahora vamos a importar nuestros componentes en App.js y le vamos asignar una className adicional que usaremos en un futuro.

import { GlobalStyle } from "./styles/globalStyles";
import { Container, Header, Main, Sidebar, Widget, Footer } from "./styles/model";

function App() {
  return (
    <>
      <GlobalStyle />

      <Container className="contenedor">

        <Header className="header">
          <h1>Header</h1>
        </Header>

        <Main className="contenido">
          <h2>Test</h2>
          <p>Lorem asdasd</p>
        </Main>

        <Sidebar className="sidebar">Sidebar</Sidebar>

        <Widget className="widget-1">Widget-1</Widget>
        <Widget className="widget-2">Widget-2</Widget>

        <Footer className="footer">Footer</Footer>

      </Container>

    </>
  );
}

export default App;

Si vemos nuestro proyecto actual, no tiene mucho estilo que digamos, solo sigue el orden jerarquizo de la etiquetas HTML.

CSS Grid + Grid Area

Para trabajar en Grid, lo que necesitamos es definir una grilla en donde acomodamos nuestro diseño, muchos frameworks usan el sistema de columnas y filas para posicionar objetos en la grilla, nosotros lo haremos de forma manual. 💪

Mi idea no es explicar CSS Grid a fondo 😢 , si no mostrar la magia de Grid Area.

En nuestro ejemplo, nuestro diseño cuenta con 3 columnas, y filas automáticas según el contenido.

Vamos a actualizar el código del componente Container, y automáticamente ya tendremos grid.

export const Container = styled.div`
width: 90%;
max-width: 1000px;
margin:20px auto;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
`

Ya tenemos una grilla, pero aun no un diseño responsive que se adapte a cualquier resolución.

Es aquí donde aparece grid area. Literalmente, nos permite definir con áreas nuestros elementos HTML, a cada componente que creamos, le asignamos un área, debe quedar así:

import styled from 'styled-components'

export const Container = styled.div`
width: 90%;
max-width: 1000px;
margin:20px auto;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
`

export const Header = styled.header`
background: blue;
color: #fff;
grid-area: header; //área

& > h1 {
    margin-left: 2%;
}

`

export const Main = styled.main`
padding-left: 2%;
grid-area: contenido; //área
`

export const Sidebar = styled.aside`
background: orange;
min-height: 100px;
grid-area: sidebar; //área

/*flexbox para acomodar elementos*/

display: flex;
align-items: center;
justify-content: center; //área
`

export const Widget = styled.div`

background: orchid;
height: 100px;
grid-area: ${props => props.className === "widget-1" ? "widget-1" : "widget-2"}; //área

/*flexbox para acomodar elementos*/

display: flex;
align-items: center;
justify-content: center;
`

export const Footer = styled.footer`
padding: 20px;
background: maroon;
color: #fff;
grid-area: footer; //área
`

NOTA: En el componente Widget por medio de props, podemos asignarle un valor condicional (otra ventaja de styled components).

Una vez que ya tenemos las áreas definidas, tenemos que utilizar grid-template-area, para escribir nuestro diseño, esto lo hacemos en el archivo globalStyles.js

Como se puede ver, nuestro tamplate, esta basado en 3 columnas (nuestra grilla), solo debemos asignar nuestros componentes al área que deseamos, siempre respetando las 3 columnas para nuestro ejemplo.

Ahora lo que resta es aplicar los diferenntes templates para las diferentes resoluciones, en nuestro caso, como estamos trabajando con la filosofía mobile-first, creamos las áreas de menor a mayor resolución.

Para esto usamos los media-queries de toda la vida en CSS.
En cada resolución, aplicamos un grid-template-area, y redibujamos nuestro diseño.

import {createGlobalStyle} from 'styled-components'

export const GlobalStyle = createGlobalStyle`

//Estilos por defecto que trae React
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


//Estilos para Grid Area

/*Grid Area First Mobile*/

/*min 640px*/
.contenedor {
grid-template-areas: "header header header"
                    "contenido contenido contenido"
                    "sidebar sidebar sidebar"
                    "widget-1 widget-1 widget-1"
                    "widget-2 widget-2 widget-2"
                    "footer footer footer"
;
}


/*min 768px*/
@media screen and (min-width: 768px){
.contenedor{
grid-template-areas:    "header header header"
                        "contenido contenido contenido"
                        "sidebar sidebar sidebar"
                        "widget-1 widget-1 widget-2"
                        "footer footer footer"
;
}    
}

/*min 1024px*/
@media screen and (min-width: 1024px){
.contenedor{
grid-template-areas:    "header header header"
                        "contenido contenido sidebar"
                        "widget-1 widget-2 sidebar"
                        "footer footer footer"
;
}

}

/*min 1280px*/
@media screen and (min-width: 1280px){
.contenedor{
grid-template-areas:    "header header header"
                        "contenido contenido sidebar"
                        "widget-1 widget-1 sidebar"
                        "widget-2 widget-2 sidebar"
                        "footer footer footer"
;
}

}

/*min 1536px*/

`

En este caso, solo creamos la estructura de nuestro sitio, pero una vez que rellenamos con nuestro contenido, podemos alinear contenido con flexbox como se muestra en el el ejemplo, en resumen, se puede utilizar el CSS de toda la vida, o combinarlo con otros framworks.

La idea principal es armar una maqueta que sea responsive, luego el contenido de cada área, se debe trabajar por separado, pero si se combina con flexbox, o subgrid, los componentes se puede manipular sin problemas.

Repo: React-StyledComponent-CSS-GridArea

Gracias
Norberto.