Image2Code

Been following a video tutorial from a great developer @midudev.

He's very much up to date with latest Web trends and technologies. It's quite refreshing to learn something new, specially from someone who knows what he's doing.

Pnpm is a lightweight and efficient alternative to NPM

Fast, disk space efficient package manager | pnpm

Fast, disk space efficient package manager

pnpm

ShadCn brings nicely designed components ready to use in your web project.

shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS.

shadcn/uishadcn

The tutorial is a NextJS app built with Typescript that fetches a URL or an Image and sends it to Open AI Vision to produce the HTML code (In this case with Tailwind).

I went a step forward in packaging and deploying the App with Docker. My server is behind CGNAT so I'm running a tunnel exposing some servers.

I found out Regctl; a nice little tool, compatible with Docker registry and that can be used to produce and upload smaller chunks, since my tunnel was having timing out while uploading using docker.

regctl registry set --blob-chunk 20971520 --blob-max 104857600 docker.io

In smaller chunks the upload is successful. I am uploading to my own private Docker registry server; I am then using Portainer to configure, launch and operate.

image-to-code

image-to-code

Gitea: Git with a cup of teardev

And the running App 😄

Image 2 Code - Genera código HTML y CSS a partir de una imagen

PoC de una aplicación que genera código HTML y CSS a partir de una imagen

Genera código HTML y CSS a partir de una imagen