DEV Community: Anna Villarreal

Exploring Sentry: Reducing Load Time 🐢

Anna Villarreal — Sun, 09 Aug 2026 14:44:41 +0000

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.

🟣 It took a little bit getting used to understanding Sentry, learning how to navigate and what can be done. In my spare time over the last few weeks, I was able to do some poking around. I connected my page at annavillarreal.com since it has a fair amount of content coming in, to make it more interesting to analyze.

Investigation

I explored the dashboard, trying to figure out how to get readings from my traffic, which didn't take to long to figure out. I found traces particularly interesting. Why? Because this is where I discovered an actual performance issue.

A trace shows a 4,229ms pageload. Here's what's driving the slowness:

The critical path is sequential and bottlenecked at the server:

Span	Duration
browser.DNS	107ms
browser.connect	553ms
browser.TLS/SSL	281ms
browser.request (TTFB)	2,068ms
browser.response	1,052ms

Findings

browser.request at 2,068ms. This means that server took over 2 seconds just to start sending a response. That alone is ~49% of the total trace time.
Notably, browser.response at 1,052ms (slow download) consumes an additional ~3.1 seconds just in the request/response cycle.

The average for this pageload is ~194ms, so the server response time being 2 seconds is the primary reason for the spike. I really don't want a new user waiting 4 or more seconds when visiting my page, that's a long time, relatively speaking.

Understanding the Data

Using Seer, Sentry's built-in AI, I was able to quickly understand the information presented before me. It explained to me that:

The GET https://dev.to/api/articles call averages 361ms and hits 1.37 seconds at p95 — so it's consistently adding latency to your pageload, and on bad days it's the biggest bottleneck.

Googlefonts was also eating up some pageload time:

Ways to Improve

Instead of the browser fetching dev.to articles on every pageload, the backend can fetch and cache them. By serving the cached result to the browser, load time is reduced. Articles don't change every second, so a background cache refresh leaves users largely unaffected.
Keep the client-side fetch, but make sure it doesn't block the initial render. Load the dev.to content lazily after the page is interactive and use a loading skeleton so users see content quickly while articles load in the background. Note: This does not make the call faster but removes it from the critical path. Makes a pleasant experience for visitors viewing non-critical data.

Particularly Interesting Performance Feature

The p95 problem specifically is handled by proxy_cache_background_update + proxy_cache_use_stale: when the 15-minute TTL expires, the next visitor gets the existing copy right away while nginx refreshes behind them. Nobody waits on dev.to after the first fill, and if dev.to is down or rate-limiting, the blog section keeps rendering off the last good copy for up to a day rather than showing "could not load posts."

Changing the cache has a real impact, the data over the last week proves it. Looking at the javascript-microserver project's performance over the past week I see:

Overall pageload (p50) trend for annavillarreal.com/

Date	p50	p95
Jul 31	708ms	708ms
Aug 1	655ms	1.6s
Aug 2	2.1s	2.6s
Aug 3	2.6s	3.5s
Aug 4	3.3s	4.2s
Aug 5	1.3s	2.5s

That's a ~60% p50 improvement on Aug 5 vs Aug 4. Fantastic.

Why the Cache Matters

The page fetches articles via GET /api/devto, which internally calls https://dev.to/api/articles. Without caching, that server-side call to dev.to was taking anywhere from 74ms to 832ms depending on the day. In this current trace, GET /api/devto completed in just 90ms, which is well below even the best prior direct-to-dev.to call. It is now being served from cache rather than hitting the external API.
In this case, the cache particularly valuable because it insulates the page from upstream latency entirely, streamlining performance for visitors to the page.

Takeaway

I really enjoyed the challenge of exploring this tool and trying to make sense of it. I can definitely see how it could lead to massive performance optimizations for end users, as I experienced it myself. I am happy I found a performance issue before many users might have the bad experience of a slow page load. Gross!

🛻CSS Art: Smoothie Food Truck

Anna Villarreal — Sun, 09 Aug 2026 13:23:55 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

💠I was not sure I was going to enter this challenge at first, because I was not feeling inspired. I do not like to force things. Then I started to think a little outside of the normal. I remembered Space Fruit, a food vendor that is a favorite of mine to find at music festivals. Nothing beats an ice cold smoothie topped with frozen fruit bits on a sweltering, hot day. When you see Space fruit, you stop, and make a direct cut to their truck. You do not hesitate. So, after some nostalgia, I was feeling motivated remembering the days when I used to vend, selling my art and being an active member of the festival community.

Demo

Change preview zoom to .5

Here is a screenshot of it working on codepen, it might not be great on some devices:

I start each idea generally by blocking out the approximate size and shape of the object I want to add.
I use gradients, box shadows, and layering to add depth and dimension.
A smattering of javascript was used to randomly place stars and have them twinkle.
Found a way to imitate an LED strip with some fancy background gradient patterns.
Pushed myself to create a wrinkling effect on the tablecloth to imitate fabric.

Journey

⭐ I made a timelapse for you guys, so I'll leave that as my journey! It's sometimes hard to imagine how much work someone puts into something without evidence. A video will communicate this pretty quickly, plus it is also satisfying to see progress happen so quickly. The biggest challenge was getting the window cut out in the back of the food truck, so you could see the stars on the other side, just like in real life.

Code

Github Repo: cssart

Catbot Development Series

Anna Villarreal — Sat, 01 Aug 2026 16:13:32 +0000

Sequence of Articles Related to Catbot's Developement

Updated on an ongoing basis

DEV Weekend Challenge: Passion Edition Submission

Anna Villarreal

Jul 13

🐈Catbot: The Custom AI Harness That Lives on Desktop ᓚᘏᗢ

#devchallenge #weekendchallenge #ai #webdev

3 min read

The evolution from sketch to robo-leg

Anna Villarreal

Jul 25

🐈‍⬛Check Out Catbot's New Leg!

#ai #programming #learning #pet

3 min read

Summer Bug Smash: Smash Stories 🐛🛹

Anna Villarreal

Aug 1

Catbot: Custom Grammar Problem Fixed

#devchallenge #bugsmash #catbot #ai

10 min read

Catbot: Custom Grammar Problem Fixed

Anna Villarreal — Sat, 01 Aug 2026 16:03:02 +0000

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.

Overview

Sometimes we discover our limitations through a series of failures. We don’t understand why something is not working, despite having tried multiple improvements and optimizations. My desktop pet, Catbot, is no exception. I had issues with Catbot cutting me off or not letting me finish before it started talking. It would constantly tell me that I was calling it cat bought and not Catbot. This was an actual pain in the rear. Catbot would spend a lot of time explaining this to me.

I was able to tweak the listening window, so that Catbot would stop listening after a 1.5 second pause. This gives me enough time to finish my sentence, given my natural pauses and end of sentences. Controlling the pause gap helped tremendously. Going from .5 seconds to 1.5 seconds made all the difference in the world.

After adding a better layer of control to Catbot’s listening skills, I still had difficulties using Catbot’s name. It thought I was saying “Catfight”, “Cat bought”, and even “Lawrence” one time. This will seem brief to the reader but it was only after multiple sessions of frustration that I came to the realization that perhaps my webcam mic was not a great listening tool for Catbot - as it picks up all sounds in the room. After some quick googling, I was very convinced that a better mic would help. I popped on my fancy cat ear headset and not to my surprise, Catbot could understand what I was saying much better. We need to make sure we are using the best hardware for the job. My headset mic is a close range omni directional mic that does a good job leaving out all the background noise.

However, Catbot refused to respond to its name and would even argue with me! It would tell me that it wants to be called by it's actual name, Catbot. (Cat bot) So everytime I said its name, there was a debate and some long side tangent dialogue to follow. This was an awful experience.

THE BUG: Catbot not listening correctly.

DEMO

This is an interesting type of bug, not the typical software battle, but rather a conceptual bug. The type of situation where massive learning happens.

Much Ado About Graphs

I discovered that runtime graphs are not supported by vosk-model-en-us-0.22, which was the preferred, larger model. The training graphs were being ignored. Which means training Catbot on how I say “catbot” is ignored. This is an outrage. The decoding graph is pre-composed into one frozen file, and there is nowhere to swap a grammar into.

Transversely, a model that does support custom grammar is vosk-model-en-us-0.22-lgraph. However, It is important that we are not really adding custom commands, but controlling the output choices available. These feel like custom commands but they are better stated as custom directions, or disallow lists.

Catbot uses kaldi, which decodes against a single finite state transducer, HCLG, built by composing 4 layers: H, C, L, G. I will discuss the G layer.

G is the grammar / language model, which maps words to words. It assigns a cost to every possible word sequence. The decoder then picks a winner. A score is a negative log probability, and every arc in the graph carries weight, which add along the path. Negative log probabilities mean that a lower number is better, and adding costs is multiplying probabilities. Here is the english version:

Total cost =

Acoustic cost	Language cost
“How well do these phones match the audio frames?”	“How likely is anyone to say this sentence in the first place?”

Facts about the situation

Neither of these alone is useful!
The Acoustics can not differentiate “ice cream” from “I scream”. They are the same sounds.
The language model does not hear. The decoder searches for the sequence minimizing the sum, which is why an LM’s job is best described as scoring sequences.

But wait... why does this situation feel like Helen Keller? Because it's a similar situation.

In the real life story of Helen Keller and Anne Sullivan, there was a communication problem. An intermediary interface must bridge two completely different sensory and data modalities. In computer science, this is called multimodal alignment. This method is just like the tactile “finger-spelling” method that connected Hellen Keller to the world.

It was not until realizing I needed two different models to handle specific use cases that I realized this fundamental problem of having AI process real analogue data, which has now placed itself at the forefront of my curiosity and this project.

A simple table will help you wrap your head around this idea without needing to explain too much:

Element	Helen Keller	Anne Sullivan (The Teacher)	The Outside World
AI Role	Acoustics Model (Vosk)	The Alignment Interface (Your Code Pipeline)	Language Model (LLM)
Data Type	Raw sensory inputs (audio waves/frequencies).	The translator bridging two completely different modalities.	Symbolic language (written words/tokens).
Function	Perceives physical sounds but completely lacks semantic context or logic.	Maps raw physical acoustic patterns directly into structured text blocks.	Processes structured text tokens logically but cannot directly "hear" physical waves.

Let’s take a look at how words are “chosen”:

A state in G represents history, the last n-1 words, and each outgoing arc is a next possible word, weighted by -log P(word | history):

“The cat” –sat (cost 4.1)-->
–ate (cost 5.3)-->
–sad (cost 9.8)-->

…So basically words are chosen via likeliness. Catbot is not a real word, so catbot was never going to understand it as such, thus interpreting “Catbot engage” as “kappa engage” and other oddity phrases that would make sense to the model as it is trained.

I had Claude synthesize some phrases for me, and it proves the issue I am having plain as day.

SPOKEN: Catbot, engage.
1. conf 114.1 kappa engage
2. conf 112.1 cappa engage

Kappa engage (a.k.a. “Catbot, engage.”) is a vocabulary trap. There is no path through G that emits Catbot, so the decoder does the only thing it can, it finds the closest match to the sound of the word. This is why saying “Catbot” failed EVERY. SINGLE. TIME. This speech recognition bug lies in the grammar available. The word “Catbot” is not really an actual word. I made that up. This is an infinite impossibility.

Shortly before this deep dive, I told Catbot to respond to “CB”. This is English alphabet, real letters that have to exist. Catbot is now configured to respond to CB. When I say CB, it knows I am talking about it. Unmistakable. Functional. As a quick fix!

As stated previously, we can disallow the decoder to consider certain words, such as “kappa” as noted above.

If I say “Catbot, engage” without restrictions, the model hears “Kappa engage”. If we restrict the model, disallowing “kappa”, Catbot will hear “cat bot engage”. Since both “cat” and “bot” are commonly used words, they are available to the model.

As you can see, training an interactive voice model is a long journey full of mysteries. From bad hardware to understanding model boundaries, sometimes we can actually gain more, with less! (Less meaning removing words from vocabulary, in this case.)

And this can only be done by using the vosk-model-en-us-0.22-lgraph alongside vosk-model-en-us-0.22. This gives Catbot the tools it needs to respond in ways that make sense to custom words.

Code Samples

So then, I Implemented a dual recognizer into Catbot:

Catbot_voice.py


 44  KOKORO_VOICES = ROOT / "models" / "voices-v1.0.bin"
 45  VOSK_BIG = ROOT / "models" / "vosk-model-en-us-0.22-lgraph"
 46  VOSK_SMALL = ROOT / "models" / "vosk-model-small-en-us-0.15"
 47 +# Dynamic-graph model — the only kind that accepts a runtime grammar. A model
 48 +# that ships a pre-composed graph/HCLG.fst has no seam to insert one into;
 49 +# Vosk logs "Runtime graphs are not supported by this model" and decodes
 50 +# freely, which is worse than having no grammar recognizer at all. Detected by
 51 +# the presence of graph/Gr.fst (the language model kept as a separate file).
 52 +VOSK_DYNAMIC = ROOT / "models" / "vosk-model-en-us-0.22-lgraph"
 53
 54  SAMPLE_RATE = 16000
 55  BASE = f"https://localhost:{os.getenv('CATBOT_PORT', '8800')}"

and…

 102          return None
 103  RE_LEARNED_WAKE = _load_learned_wake()
 104
 105 +# ---- grammar-constrained wake/command recognizer ------------------------
 106 +# A SECOND recognizer decodes the same audio against nothing but the phrases
 107 +# below. It can't hear anything else, so "catbot engage" can't come out as
 108 +# "kappa engage" — that word doesn't exist in its graph. Anything Anna says
 109 +# that isn't a listed phrase decodes as "[unk]", which is exactly why this
 110 +# only ever SUPPLEMENTS the free recognizer (which still handles all
 111 +# conversation) instead of replacing it.
 112 +#
 113 +# Every word must be in the model's vocabulary or Vosk silently drops it:
 114 +# "catbot" is not an English word, but "cat bot" is two of them. That's the
 115 +# whole reason his name is spelled out here — _build_grammar checks each word
 116 +# against the model and logs anything it had to drop.
 117 +WAKE_NAME_FORMS = ["cat bot", "cat pot", "cat bought", "cat bottom", "cat but",
 118 +                   "catfight", "combat", "cabot", "kat bot", "cap pot"]
 119 +# what can follow his name (empty = just the name, which wakes him too)
 120 +GRAMMAR_TAILS = ["", "engage", "engaged", "wake up", "wake",
 121 +                 "are you listening", "are you there", "you there",
 122 +                 "go to sleep", "sleep", "stop", "stop listening",
 123 +                 "be quiet", "quiet", "shut up", "hush",
 124 +                 "open terminal", "close terminal", "approve", "skip"]
 125 +# phrases that stand alone, with or without his name
 126 +GRAMMAR_BARE = ["open terminal", "close terminal"]
 127 +
 128 +
 129 +def _build_grammar(model) -> str | None:
 130 +    """JSON phrase list for the constrained recognizer, filtered to words the
 131 +    model actually knows. Returns None if nothing usable survived."""
 132 +    names = list(WAKE_NAME_FORMS)
 133 +    # whatever wake_training.py learned from Anna's own mic counts too
 134 +    try:
 135 +        learned = json.loads((ROOT / "catbot_wake_variants.json").read_text())
 136 +        names += [w.strip().lower() for w in learned
 137 +                  if w.strip() and w.strip().lower() not in names]
 138 +    except Exception:
 139 +        pass
 140 +
 141 +    phrases = {f"{lead}{name} {tail}".strip()
 142 +               for lead in ("", "hey ")
 143 +               for name in names
 144 +               for tail in GRAMMAR_TAILS}
 145 +    phrases.update(GRAMMAR_BARE)
 146 +
 147 +    known: dict[str, bool] = {}
 148 +    def in_vocab(word: str) -> bool:
 149 +        if word not in known:
 150 +            try:
 151 +                known[word] = model.vosk_model_find_word(word) >= 0
 152 +            except Exception:
 153 +                known[word] = True      # can't check — assume fine
 154 +        return known[word]
 155 +
 156 +    kept, dropped = [], set()
 157 +    for phrase in sorted(phrases):
 158 +        missing = [w for w in phrase.split() if not in_vocab(w)]
 159 +        if missing:
 160 +            dropped.update(missing)
 161 +            continue
 162 +        kept.append(phrase)
 163 +    if dropped:
 164 +        logger.info("grammar: dropped phrases using words the model doesn't "
 165 +                    f"know: {sorted(dropped)}")
 166 +    if not kept:
 167 +        return None
 168 +    # "[unk]" is the escape hatch: it lets the decoder say "that wasn't any of
 169 +    # these" instead of forcing Anna's conversation into the nearest command
 170 +    return json.dumps(kept + ["[unk]"])
 171 +
 172 +
 173  # in-conversation commands
 174  PROVIDER_WORDS = {
 175      "claude": "anthropic", "anthropic": "anthropic",

As well as…


 470          # Lower CATBOT_END_SILENCE = faster to answer but more likely to cut you
 471          # off mid-sentence; higher = more patient. 0.65s is a good balance.
 472          self.end_silence = float(os.getenv("CATBOT_END_SILENCE", "0.65"))
 473 +
 474 +        # Second recognizer, constrained to the wake/command grammar above.
 475 +        # Runs on its own dynamic-graph model so the big model keeps handling
 476 +        # conversation with its full rescoring stack. Cost, measured: ~200 MB
 477 +        # of RAM and roughly DOUBLE the decode CPU (4.3 -> 8.0 ms per 62 ms
 478 +        # block) — the grammar shrinks the search, but a second acoustic model
 479 +        # still runs on every block. Still only 0.13x realtime, so it adds no
 480 +        # latency; set CATBOT_GRAMMAR=0 if that ever stops being true.
 481 +        self._grec = self._gmodel = None
 482 +        if os.getenv("CATBOT_GRAMMAR", "1").split("#")[0].strip().lower() \
 483 +                not in ("0", "off", "no", "false"):
 484 +            try:
 485 +                name = os.getenv("CATBOT_GRAMMAR_MODEL", "").split("#")[0].strip()
 486 +                gdir = ROOT / "models" / name if name else VOSK_DYNAMIC
 487 +                if not (gdir / "graph" / "Gr.fst").exists():
 488 +                    logger.warning(
 489 +                        f"grammar recognizer OFF: {gdir.name} has no dynamic "
 489 +                        f"graph (graph/Gr.fst) — runtime grammars need one")
 490 +                else:
 491 +                    # keep the Model referenced for as long as the recognizer
 492 +                    # lives (the binding only borrows its handle)
 493 +                    self._gmodel = vosk.Model(str(gdir))
 494 +                    grammar = _build_grammar(self._gmodel)
 495 +                    if not grammar:
 496 +                        raise RuntimeError("no usable grammar phrases")
 497 +                    self._grec = vosk.KaldiRecognizer(
 498 +                        self._gmodel, SAMPLE_RATE, grammar)
 499 +                    logger.info(f"Grammar recognizer ready ({gdir.name}, "
 500 +                                f"{len(json.loads(grammar)) - 1} phrases)")
 501 +            except Exception:
 502 +                logger.exception("grammar recognizer failed to load — "
 503 +                                 "continuing with the free recognizer only")
 504 +                self._grec = self._gmodel = None
 505 +
 506          self._kokoro = Kokoro(str(KOKORO_ONNX), str(KOKORO_VOICES))
 507          # warm up the TTS so the FIRST spoken reply isn't slowed by cold-start
 508          try:

So basically, both models run in parallel, as two arguments, against the same regexes. The grammar model helps with commands and the bigger model is used for more conversational interactions. This effectively makes Catbot a more efficient desktop companion. It is now much more pleasant to hang out with Catbot.

Learning

This entire project, it's all learning, all new territory. Tuning Catbot's ears is a real challenge. I had an awakening about hardware limitations, and an enlightening experience about why different models are used and for what purpose. Since I cannot recompose the larger model with new grammar, I can use the lgraph model on the side to handle custom needs more gracefully. When I made the connection to Helen Keller, I understood the whole situation from a very global perspective. It's not really something I could fully understand without diving into chaos.

Thank you for checking out Catbot's progress!

🐈‍⬛Check Out Catbot's New Leg!

Anna Villarreal — Sat, 25 Jul 2026 01:40:56 +0000

This is fun. I absolutely must share.

So I recently created a desktop pet, called Catbot. Catbot is voice activated and has memory in an obsidian vault that it shares with models of choice as needed. Catbot is a harness that feels like a pet. I quickly built Catbot a body using AI and was excited to see the result was a furry creature with a robotic leg, which I had asked for. This worked for messing around and building Catbot to start. Here are some images I generated with ai in a previous week, just to catch you up to speed:

Awkward initial rendering needing refinement

A high level mock technical drawing generated by Gemini I used to generate Catbot's original body

Original Catbot appearance.

But that badly represented robotic pet leg was getting on my nerves. I knew it had to be better. In the back of my head I was like you know what, it needs a way better leg. I let it fester in my head for a while. Then finally, I couldn’t take it anymore. The next moment of free time I sat down and drew up what I thought a robotic pet leg might look like. I drew this quickly, in about 15 minutes or so. I was happy with the overall idea, and believed it made sense. Here is my drawing:

My original drawing

After creating the drawing, I knew that I had to have multiple views to have enough data for ai to create a working prototype. I gave my drawing to Gemini using the following prompt:

“I created this robotic cat leg and I need some good technical drawings of top, side view, front view and back. Can you make me a good technical drawing I can use to share my idea? “

And having luck previously with a different type of schematic (the original Catbot) I knew that this would at least produce something marginally workable. I was absolutely blown away by the mock schematic it produced for me. It is freaking beautiful, exactly what I wanted!

Nice looking technical drawing by Gemini.

I then gave the schematic with a detailed description to opus for creation using existing Catbot architecture, (using three.js) to create the fantastic leg for me. It did a pretty good job!

I’ve added a video so you can see an interaction with Catbot. It’s entertaining until it frustrates you. Work in progress for sure. LOL. It was difficult to get Catbot's opintion of it's new leg:

Catbot is a brat. Do not give your AI pet sass. (You know, unless you can deal with it.) 😂

And let's not forget where we started:

Catbot the first.

Catbot the second.

So I guess this latest Catbot, is Catbot the 4th.

Has anyone else created an AI pet?

FLUX on a 4070 Graphics Card 🖼️

Anna Villarreal — Sat, 18 Jul 2026 14:32:08 +0000

Preliminary

In the past, I have tried a few things to get local video and image generation to work to my satisfaction. I was irritated for a while that my older macbook didn’t have an M chip because I know you can do some cool stuff with Ollama. But I am not buying a computer every year. That’s unrealistic and wasteful. One of my recent stunts involved trying to get fable to setup a workflow on comfyUI. While that’s novel and impressive-looking, the output was poor at best and I was not amused. Node confusion, half of them in languages I cannot read. I already have too many projects, I’m not about to decipher foreign languages on the fly or watch 30 node handling videos on Youtube over the course of 3 months. Time is a real factor here.

With the 3rd extension of free fable use I’m squeezing every last drop out of it. I’m not wasting it either - I’ve got it dropping all kinds of notes to my vault so I can reproduce things on my own later. And honestly, that’s serious real world value for my workflow.

Before I ramble, I must give credit to Youtuber Richard Aragon for sharing his magnificent google colab notebook. I stumbled into this whole process on accident looking for videos about quantization in an effort to know more about what the eff is quantization really. Little did I know this attempted deep dive would lead me down a path to resolve a personal problem of local generation. By the way, he mentions being able to do this on a 4060, so guys, all is not lost if you have a little bit of patience and good timing. I have come to find out that as developers we have unparalleled patience. So then, this post is for you. If I can save a single person from massive frustration, then I have done my job. It is better to share than to hoard. Because, like Richard Aragon, I would much prefer to share and help. <3

Start Your Own Workflow

Here is Richard’s Youtube link and the google colab is in the notes: AI Quantization Easily Explained

What is really amazing is that I discovered I can use a quantized model locally and train it on my own content. As an artist, I was extremely curious to see how AI might create images for me in my art style. Mission accepted!

Here is EXACTLY what I did with no shame:

❤️ I gave Fable the link to the google colab notebook, explaining what I was trying to accomplish. Fable fetched the data from the notebook and created it locally - a private copy of the workflow for me to modify as I wish.
🧡 Using the 34GB base model from Hugging Face, I am now able to train it on my own images to create my own style. This is accomplished by using a LoRA file which acts as a “lense” that attaches to the base model. This means that you can train it to have many lens (styles!) on your local workflow. In his video, Richard uses pieces from the late Alphonse Mucha (Famous artist if you haven’t heard) to train the model. The results were on point, and even after quantization they still held enough data to hold onto most defining characteristics. Using this knowledge, I ran the same tests as him for a control.

One test without training.
One test with training.

💛 After testing, I knew the structure was in place for experimentation. The first thing I needed to do was to create a folder with my artwork, 14 images, and a metadata.jsonl file. (made my first jsonl file from scratch yesterday, cool haha). This metadata pairs the description of the image to the actual image so FLUX can interpret it for training.

Demystification

Here is essentially how we get a 12GB card to handle a 24 GB model. I’ve simplified the terminology for learning and demystification purposes:

💚 Shrink/Quantization Specifically 4-bit NF4 quantization (NormalFloat4), done by the bitsandbytes library. "8-bit" and "4-bit" refer to how many bits store each model weight.

🩵 Freeze/Parameter-efficient fine-tuning (PEFT), specifically LoRA (Low-Rank Adaptation). The base model's parameters are frozen, so you train small low-rank adapter matrices instead.

💜 Precompute/Embedding caching and and latent caching.

🩷 Right-size/No single fancy word Memory footprint management: lower training resolution, batch size 1 with gradient accumulation, gradient checkpointing (recompute instead of store), and an 8-bit optimizer. Each trades a little speed or precision for a lot of memory.

No fancy UI at the moment (...already have plan for that 😂) but using the terminal and running the python script afterwards with optional parameters offers additional flexibility of image generation.

Here are the generations from my first local tests

Control 1 - untrained

Control 2 - Alphonse Mucha

Training 1 - 100 step artwork (fast, minutes)

Test 1 - 100 step artwork (EVERFLUO style)

Training 2 - 700 step artwork (over an hour)

Test 2 - 700 step artwork (EVERFLUO style)

Much closer resemblance to style.

Test 3 - Ran EVERFLUO style with very custom prompt to see limitations, needs work/additional training to be extra fancy.

Pushing model outside of training to see what happens.

What about video?

I was able to piggy-back off of the pre-existing image generation setup to build a video generation workflow. I am currently taking a stab at a 5 second video on the 4070 on one of my paintings. It's going to be at least an hour and I will update this post.

Here is the first video!

On that note, I'll survive another year without a 5090, maybe XD.

Bitarazzi Short Film: Imperfect Awesomeness🌱

Anna Villarreal — Thu, 16 Jul 2026 01:07:02 +0000

I want to give you spoilers but you must watch it first. Here's basically what happened.

Firstly, this project was for fun.

The lyrics where generated by Claude first with a prompt including what we were after.
The music was generated by Suno after telling it we wanted something that sounded like "Paparazzi" by Lady Gaga, shortly after coining the term "bitarazzi"
The videos and images were generated by Gemini and I ended up developing a character, or two.

I found myself creating a story with meaning in the video, that related to my own life as I pieced it together in 10 second spurts (3 ten second videos per day on Gemini free tier, don't mess up or you have to wait!)

AI is not all evil or bad. To me, I see it as a creative outlet. It's fun. Sure (Spoiler alert!!!!!) she might be plugging the ethernet cord in upside down, but the idea is generally communicated in a decent way.

I completed this in the mornings as I had time over the course of a few weeks. I could refine it forever, but I think it's cool how fast you can buzz along with a creative project/prototype/idea with AI. So cool. They didn't have this when I was a teenager!

I did actual human editing in adobe premier to string it together in a way that semi made sense! Hope you like the bitarazzi debut, haha!

Thank you @trickell for your help and inspiration! <3

🐈Catbot: The Custom AI Harness That Lives on Desktop ᓚᘏᗢ

Anna Villarreal — Mon, 13 Jul 2026 04:55:27 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

This weekend, I went on a journey to build a voice activated assistant on my desktop, named Catbot. In the process, I switched from notion over to obsidian. Obsidian acts as a knowledge base for the agents to communicate. Catbot is a custom harness I built that I can use with any of my agents. Catbot is voice activated and sleeps in a bed when I tell him too. I also created a small skin modifier to change it's appearance.

Demo

Catbot switches voices in real time on my desktop!

Code

Here is a snippet from my catbot_voice.py. This is a private project at the moment, but I am comfortable sharing the initial setup with everyone!

import os
import re
import json
import time
import queue
import random
import logging
import threading
from pathlib import Path

import httpx
import numpy as np
import sounddevice as sd
import vosk
from kokoro_onnx import Kokoro
from dotenv import load_dotenv

load_dotenv(Path(__file__).parent / ".env")

logger = logging.getLogger("catbot.voice")

ROOT = Path(__file__).parent
KOKORO_ONNX = ROOT / "models" / "kokoro-v1.0.onnx"
KOKORO_VOICES = ROOT / "models" / "voices-v1.0.bin"
VOSK_BIG = ROOT / "models" / "vosk-model-en-us-0.22-lgraph"
VOSK_SMALL = ROOT / "models" / "vosk-model-small-en-us-0.15"

SAMPLE_RATE = 16000
BASE = f"https://localhost:{os.getenv('CATBOT_PORT', '8800')}"

# Tolerant of how recognizers mangle "catbot": fuzzing Vosk against Kokoro
# speech produced "cat bought", "that bought", "cat ba bought", "can't bought",
# "cat bottom gauge"... A false wake just means he listens, so err generous.
BOT = (r"(?:cat|kat|cad|catt|that|can'?t|cap)\s*-?\s*(?:\w{1,3}\s+)?"
       r"(?:bottom|bought|boat|both|body|bert|bird|bot|but)")
# every way of telling him to be quiet actually works now — "shut down",
# "stop", "quiet" etc. used to fall through to the LLM, which would *claim*
# to shut down while nothing happened
STOP_WORDS = (r"(?:go\s+to\s+)?(?:sleep|slee|asleep)|shut\s*(?:down|up)|"
              r"(?:be\s+)?quiet|stop(?:\s+(?:listening|talking))?|"
              r"power\s+(?:down|off)|turn\s+off|pause|hush|silence")
RE_SLEEP = re.compile(BOT + r"[,!.\s]*(?:" + STOP_WORDS + r")\b", re.I)
RE_ENGAGE = re.compile(BOT + r"[,!.\s]*(?:(?:en\s*)?(?:engage|gage|gauge|engaged|gaged)d?"
                             r"|wake\s*up|wake)[,!.\s]*(.*)", re.I)
# While ASLEEP, bias hard toward waking: a missed wake makes him unusable,
# a false wake just means he listens. Any engage-ish or wake-ish word wakes.
RE_WAKE_LOOSE = re.compile(
    r"\b(?:en|in|and|un)?[\s-]*(?:gage|gauge|engage)[ds]?\b|\bwake+\s*(?:up|it)?\b",
    re.I)

# in-conversation commands
PROVIDER_WORDS = {
    "claude": "anthropic", "anthropic": "anthropic",
    "gemini": "gemini", "google": "gemini",
    "gpt": "openai", "chatgpt": "openai", "chat gpt": "openai",
    "openai": "openai", "open ai": "openai",
    "ollama": "ollama", "local": "ollama", "qwen": "ollama", "quen": "ollama",
}

How I Built It

A FastAPI server server.py is the single brain-stem: every surface talks to Catbot over HTTPS on port 8800.
Catbot routes chats to chosen provider in providers.py, injects the shared memory from the obsidian vault.
runs background agent missions, and turns catbot-publish blocks in replies into real files like vualt notes or web pages.
Catbot is a transparent always-on-top window with its own offline voice engine catbot_voice.py: Vosk hears speech, intents route commands, Kokoro answers aloud.

I was first using kokoro for voices and then I discovered the amazing possibilities for voices at eleven labs. I recorded enough of my voice to make a pretty close clone, and it's definitely interesting to hear yourself talk back to you.

There is a web view but he mostly just lives floating on the desktop - where I want Catbot to live.

I went through some modifications during this process. Catbot started out Grey and then I added a skin modifier:

Original rendering of Catbot

Skin modifier for Catbot!

Catbot goes to sleep!

Catbot optional web interface

I am obsessed with my new digital pet cat, and that's why I had to share him for this passion project. Thank you for reading!

Prize Categories

I am submitting for Best Use of ElevenLabs. Using a custom built voice, I was able to integrate it through the API easily to Catbot to add to my voice bank!

Simple Benchmark Review: Ollama on Jetson Nano

Anna Villarreal — Sun, 12 Jul 2026 05:43:01 +0000

Previous Related Post: Part 1

This particular rabbit hole was created due to a previous conversation I had here with another member on DEV about benchmarking and tests. Lot's of questions sparked:

What's the best way to do them?
How do we do them?
What are good numbers?
What information is actually important?

The truth is that it heavily depends on what you are doing and what is important to you, first and foremost. For me, and my little test generation app, my purpose seemed simple: create a simple app using ai, locally, for free, and take text I have and generate flashcards and quizzes from it so I can review. I can tell you by this point I have spent less time reviewing and more time digging into interesting tools.

On this particular journey, man - I did so much I'm having trouble knowing what to explain first. But I'll try to stick to testing. So basically, I wanted to see which model would run the best on my nano, you know without crashing it, because I did do that actually at one point. That's a tangent I'll save for later but I saved by conversation with claude in my techdocs if you want some entertainment. ( techdocs --> then click jetson nano on the left. ) I did not have enough ram on my nano to handle the test run. This led me to create a swap file to accommodate for lack of ram in case of emergency. Just as a safety net - since I get into trouble.

Safety net in place, I create a quick quiz of the OSI model from a web page to use as source of truth - something to compare the results to. Thanks Vinicius Pereira for the ideas in our chat! So, I ran this test against each one of the models and varying 'quantizations' (is that a word yet?) to bring to light the mystery of this concept.

The high level - if a model is heavily quantized, you lose quality. Brass tax.

I went to these great lengths and then only come to realize, sheesh, this is only for one specific use case. This would take a minute to map performance across many different use cases. I wonder, if you have nano, what have you used Ollama for on it? Not like I need another reason to hoard data. XD

Anyways, in case you don't feel like navigating away, here's a table:

Model	Quant	Accuracy
qwen2.5:3b-instruct	q4_K_M	100%
qwen2.5:3b-instruct	q5_K_M	100%
qwen2.5:3b-instruct	q8_0	100%
qwen3.5:2b	q4_K_M	0% (empty output)
qwen3.5:2b	q8_0	0% (empty output)
llama3.2:3b-instruct	q2_K	40%
llama3.2:3b-instruct	q4_K_M	90%
llama3.2:3b-instruct	q5_K_M	90%
llama3.2:3b-instruct	q8_0	90%
mistral:7b-instruct	q2_K	80%
mistral:7b-instruct	q4_K_M	100%
mistral:7b-instruct	q5_K_M	80%

Some cells above are empty because they would not fit on the gpu of the nano, so no point in running a test for a model that will never perform as needed due to hardware limitations.

The numbers are based on a pool of 10 questions, so this is why the numbers are so perfectly precise. Obviously this is simple high level test, but I wanted to work through this fully. Having gone through the motions, I know that the rabbit hole is deep and vast and this is barely the surface. But from simple test point of view for my use case of quiz generation, qwen2.5:3b-instruct takes the cake from the bakery to the house. Guess ima have a slice once I recombobulate my app, switching from llama3.2:3b-instruct to qwen ~ a task for another day.

I'm sure many of you reading this have seen other benchmarks elsewhere. I'd love to have some peer review here to tell me if I'm kind of on point here or if my data looks odd. Feel like I'm falling into a dark trap of testing things. I know others have done this and there is other information out there, but what kind of actual appreciation for the technology does that offer?

Jetson Nano: Ollama & Optimal Quantization

Anna Villarreal — Sun, 05 Jul 2026 16:06:31 +0000

I am delighted to announce that a user reported dysfunction so that I could go down the rabbit hole of fixing it. Messing around locally is one thing, but building a tolerable app for end users has other considerations when using a ‘local’ AI. This led to interesting findings about the limitations of hardware and gaining a high-level understanding of quantization and it's importance. I also explain how to creatively get around limitations. It's called flippy card, and it's an app that helps you study via custom uploaded content. Wanna see it? It's here: Flippycard

Problems:

Ollama was stuck behind cloudflare in a local loop.
Ollama needs to be accessed outside of systemctl with config file.
Ollama was running painfully slow, and needed to set it to use GPU, not CPU.
Had to build Ollama from source and tell it to use GPU instead.

Implementations:

Make sure Ollama goes through cloudflare tunnel.
Create configuration file so that Ollama is reachable externally.
Build from source to save resources, Docker is too resource intensive for Jetson Nano to be performant.
Increase speed by switching from CPU -> GPU, you need to be explicit about these things.
Keep a watchful eye on system resources to make sure the Nano is not at risk of crashing. I also added a Notes section to my new techdocs page to start documenting implementations.

I built from source to spare resources on the jetson orin nano which took about 30 minutes. I had concerns about pushing my 8GB of ram to its limit, which is a very valid concern. I need to keep it as lightweight as possible. As much as a docker container appealed to me, it is slim-pickin’s on a budget.

Building from source steps:

Step 1: Install CUD toolkit + cmake with:

Sudo apt install -y cuda-toolkit-13 cmake

Step 2: Install Go (arm 64):

Curl -LO https://go.dev/dl/go1.24.4.linix-arm64.tar.gx && sudo tar -C /usr/local -xzf go1.24.4.linux-arm64.tar.gz && rm go1.24.4.linux-arm64.tar.gz

Step 3: Add Go and CUDA to PATH:

Echo ‘export PATH=$PATH:/usr/local/bint:/usr/local/cuda-13/bin’ >> ~/.bashrc && esport PATH=$PATH:/usr/local/go/bin:/usr/local/cuda-13/bin

Step 4: Clone and build ollama with sm_87:

Git clone https://github.com/ollama/ollama /home/anna/ollama-src && cd /hom/anna/ollama-src && CUDA_ARCHITECTURES=87 cmake

This whole process took roughly 30 minutes.

Effeciency

I wanted to share this process easily, so I connected the gmail MCP server to claude so I can send emails of the process summary to myself.

Maximizing efficiency on the jetson nano was a good choice. I really don't want to be managing a bunch of documentation from my server, so I've created a new place to document my journeys on my new techdocs page. I built this while ollama was building. Understanding resource considerations, I asked claude to also build me a new page for me to put all my tech findings only if it didn't push my resources on my tiny server to the limit - knowing the process at hand was of the utmost importance. It analyzed the situation, gave me real feedback, and told me what could be done since I was already pushing the limits of hardware capabilities with my current install. This was a great insight to not crash the PC while an important process was running. Since everything was already running I was able to add new routes easily with a few lines. Of course I realize I could have done this on another computer, but it’s fun to push the limits of hardware.

Quantization - New Topic (for me)

Quantization:

“Quantization is the process of reducing the precision of a digital signal, typically from a higher-precision format to a lower-precision format.” (Brian Clark, IBM)

After finally getting everything to work, the request took 13 minutes and 20 seconds using the Q8_0 version. This is where I learned about quantization. I then tried another variant, Q4_0 to improve the results.

Benchmarks

Here is the benchmark breakdown of Q8_0 vs Q4_K-M quantization:

Since the bottleneck was "model doesn't fit in available GPU memory," we tested a smaller quantization of the exact same model (llama3.2:1b), rather than switching to a different, weaker model family.

	Q8_0 (original)	Q4_K_M
Model file size	1.5 GB	808 MB
GPU layers loaded	3–9 of 17	17 of 17 (100%)
Generation speed	~1.2–1.35 tok/s	~30.7 tok/s
Real 971-token test	13m 20s	~35–45s

Q8_0 (original) Q4_K_M (new)
Model file size 1.5 GB 808 MB
GPU layers loaded 3–9 of 17 17 of 17 (100%)
Generation speed ~1.2–1.35 tok/s ~30.7 tok/s
Real 971-token test 13m 20s ~35–45s (estimated at this rate)

That's roughly a 25x speedup, because the entire model now fits on the GPU instead of mostly running on the slow CPU path. Amazing! But what's the catch?

Issues

Q4_K_M is fast but produced malformed output sometimes.

Before switching, ran 6 back-to-back test generations with Q4_K_M to check reliability, since lower-precision quantization can be less consistent.

Here's what happened:

2 of 6: perfectly valid JSON, correct structure
1 of 6: valid JSON, but used a slightly different field name than expected
3 of 6: malformed JSON (e.g., a mismatched bracket) that would have crashed the app's parser outright

That's roughly a 50-65% failure rate per attempt. I cannot knowingly ship that, even with a massive speed improvement.

So how do we handle the error-prone behavior of Q4?

Rather than giving up on the faster model, automatic retry logic was added to the app itself. If the model's response is malformed, the app now silently tries again up to 3 times before showing an error. Because each Q4_K_M attempt only takes about 30-45s, even a worst-case 3 attempts is still far faster than a single guaranteed-slow Q8_0 request, while pushing the effective success rate up to roughly 85-95%.

This handles the potential parsing errors gracefully. Since Q4 is 25x times faster, the client won’t really feel it.

Side note: I noticed my Jetson had the “super” abilities after a month of setting it up. Don’t do what I did. Check for super abilities first. It’s a free download. XD

👾 🧚🏼‍♀️Maximizing Fable for Life Admin

Anna Villarreal — Sat, 04 Jul 2026 12:31:09 +0000

TLDR: The most powerful AI on the planet, only a few days of access. Maximize it.

I'd first like to give credit where it's due: @trickell - Thank you for sharing Network Chuck's youtube video with me. The reference video is found here guys if you missed it: Network Chuck's Video on Fable

I first started by creating a nice template for tech documentation for personal use. It created a beautiful piece of work in about 5 minutes - something I could easily expand on in the future. Here is what it generated for me with after a one or two careful prompts:

Clean UI, Easy Navigation! Created this personal reference guide for studying for CCNA (Network Chucks Summer of CCNA)

Wanna see it? It lives here: Techdocs

But after learning about the true span of Fable's power, I started asking the serious questions, the ones that are life-changing. How can I increase my quality of life based on my resume, experience, and current life circumstances? I wrote about 2 pages of life issues that needed fixing - you know the stuff that slowly eats away at your soul, like student loan debt and people that are challenging to work with? Yes - I told it my biggest issues and instructed it to give me actionable plans that are free or low-cost. Even fable told me that this was a lot. 😅

Getting Organized

Knowing the scope of my own problems I knew that my thoughts and processes had to be organized. Luckily for me, I remembered I had a good place to do that. A place that Fable could connect to and place documentation in place for me with checklists, notes, summaries and actionable plans. That app is called Notion, and some of you may have heard of it.

No one is going to organize your life for you, no one, except for AI

I couldn’t think of a better place for lightning fast critical life-admin documentation on the spot. And I can tell you, this integration works like a charm, and I highly recommend it. For a busy person with a million ideas, this is great.

Anxiety Relief

I had a tremendous amount of anxiety about my pending student loans. After bringing things to light with Fable, I realized that even though I am forced to make payments, it would be entirely manageable. I had massive fears about this because of all the ongoing litigation. Fable helped me think clearly through this - and I found the solution that would best work for my particular position it would seem.

Future Hope

I fed it my resume, my linked in, my server website. I told it my struggles about finding work although feeling quite capable. It made me realize something. Even though Junior dev positions are a wasteland at the moment, fable was able to reframe my current position for me in an elegant manner.

Direct copy from fable:

You are not "a junior dev in a dead market." You are a hybrid: IT support + full-stack dev + technical writer with a real audience + CCNA in progress + self-hosted infrastructure experience. Pure junior dev roles are brutal right now, but hybrid roles are NOT

… monumentally wicked powerful outlook rescoping!

In less than an hour, fable has given me a greater peace of mind, hope, and actions I can work on right now to improve my life and the life of those around me. If you haven’t messed with fable, times a-ticking, go do it now.

👾 Server Access Logs with GoAccess

Anna Villarreal — Sun, 21 Jun 2026 23:49:41 +0000

Part 1: Self-hosting on Jetson Orin Nano

👽 Jetson Orin Nano Web Server Follow-up 👽

Cool! Now that the mini web server is up and running, how can I see web traffic easily? I discovered GoAccess recently, which is a free and open source tool for checking out server logs in real time. There are two way to view it. At first I was happy to just see nicely-parsed server logs in the terminal. Ahhhh, organization! It gives you a bunch of interesting stuff to look at.

Here is what the terminal view looks like:

Dats cool

You know, inviting traffic to a webserver invokes anxiety. Having half an idea of what is happening helps ease tension for sure. I was really excited to find this tool. You can open go access in the terminal to display different information with different views. I will leave the explaining to the official documentation found here: GoAccess Docs

But the web developer in me was super excited to find a very human-readable html version readily available. Using a reverse proxy through nginx, you can view all the stats on a web page locally. It also allows you to pick a theme and customize how the information is displayed. Be sure to check out the settings and chart options!

Here is what the html view produces:

Stats for silly hoomins.

Idk about you, but this is my super exciting find for the day.

I think my next step is to connect an agent that reads the logs and alerts me on set parameters.

I'm interested to hear what tools all of you use to enhance web server monitoring?

What's the best agent for web analytics, in your opinion?