Get Started

Fine-Tuning on HTMX: Making Web Development Faster with AI

March 12, 2024
by Vadim Smirnov, Katia Bystrakova
2 min read

HTMX is a library that communicates to the backend without requiring JavaScript code. It makes Front-end development easier, and Refact.ai can empower it with AI auto-completions.

Coding assistants may be dumb with specialized stacks like HTMX, but not Refact.ai. You can educate (=fine-tune) it on the stack you need to receive tailored AI code suggestions.

Let’s do it and see how to complete HTML projects faster!

Go Self-Hosted

Fine-tuning is available in Refact.ai Self-hosted and Enterprise versions. This ensures your code’s security as data never leaves your server.

To set up your own server:

docker run -d --rm --gpus all --shm-size=256m -p 8008:8008 -v refact-perm-storage:/perm_storage smallcloud/refact_self_hosting:latest

Create Your Fine-tuned model

Create HTML project with HTMX and AI completions

We’ll create a simple HTML structure using an AI tool for front-end coding:

HTMX

HTMX’s hx-get handles data fetching, no Java Script code required. The hx-target specifies which HTML element we will use as an output target.

<button
    class="bg-red-500 text-white py-2 px-4 rounded-lg"
    hx-get="/todos"
    hx-target="#todos"
>
    Get Todos
</button>


Now, let’s complete our HTML code using Refact.ai! After fine-tuning, the model becomes familiar with the HTMX stack, and offers accurate AI suggestions to simply accept. Less manual efforts, more action! See how fine-tuning makes your coding faster:

Time spent:

Without Refact.ai — 3:26 minutes
With Refact.ai — 2:42 minutes
With Refact.ai + LLM fine-tuning — 1:20 minutes

Fine-tuning helps to complete the coding task twice faster!

Overall, it’s a fantastic boost in productivity!

For assistance in setting up your on-prem Refact.ai instance, join our Discord community.