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

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:

• If you have a GPU, run a Docker container with the command below and follow the instructions

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

• .. or get a cloud GPU with Runpod. It’s simple! Find the video guide here

Create Your Fine-tuned model

• In your Refact.ai Self-Hosted instance, go to the Sources page
• Upload the source codes or link a GitHub repo with the same stack code. For HTMX, you can use one of this repos: 1, 2
• Click the Scan Sources and Run Fine-tune buttons

Create HTML project with HTMX and AI completions

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

• One centered div
• A button inside
• A div to output the to-do items from the backend

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!

• Non-fine-tuned model is helpful too, but struggles with correct HTMX attributes and suggests incorrect syntax
• Fine-tuned model is aware of the existing attributes and suggests correct AI completions

Overall, it’s a fantastic boost in productivity!

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

Get a 2-week free trial of Refact.ai Enterprise
or set up a meeting with our team.