Gemma3-2B-CAITI-ACR-v1 (Agentic Component Recognition or Automated Component Reasoning) is a fine-tuned version of Google's Gemma 3 2B model optimized for visualization component selection, reasoning, and code generation in generative UI applications. This model specializes in translating natural language requests into appropriate visualization components using Recharts, D3, and Tremor libraries.

Model Details

Model Description

This model serves as a specialized reasoning and code generation system for dynamic visualization component selection in generative UI applications. It bridges the gap between natural language requests and the most appropriate visualization implementation, enabling applications to dynamically render UI components based on user intent without predefined navigation paths.

Developed by: Noble Ackerson (@stigsfoot)
Funded by: Self-funded
Shared by: Noble Ackerson (@stigsfoot)
Model type: Causal language model fine-tuned for visualization component reasoning
Language(s): English
License: Gemma License (https://ai.google.dev/gemma/terms)
Finetuned from model: Google Gemma 3 2B

Model Sources

Repository: https://huggingface.co/stigsfoot/gemma3-2b-caiti-acr-v1
Paper: N/A
Demo: N/A

Uses

Direct Use

This model can be directly used to:

Select appropriate visualization components based on natural language requests
Generate React component code using Recharts, D3, or Tremor
Provide reasoning about visualization choices
Power generative UI applications with dynamic component rendering

The model accepts natural language queries about data visualization and outputs both component selection reasoning and the corresponding React component code.

Downstream Use

The model can be integrated into:

Smart home dashboards and monitoring applications
Business intelligence tools requiring conversational interfaces
Generative UI frameworks like Vercel's AI SDK
Low-code/no-code platforms for data visualization

Out-of-Scope Use

This model is not designed for:

General-purpose code generation outside visualization contexts
Creating visualizations that intentionally misrepresent data
Generating full application frameworks beyond individual visualization components
Non-English language requests
Creating visualizations for libraries not included in training (primarily limited to Recharts, D3, and Tremor)

Bias, Risks, and Limitations

The model performs best on visualization types present in the training data
May have difficulty with highly specialized or complex visualizations
Limited to the component libraries it was trained on
Not designed for general code generation outside visualization contexts
Not optimized for multilingual requests
May occasionally generate code with syntax errors or suboptimal performance
Visualization choices may reflect biases present in training data regarding "best" visualization types

Recommendations

Users should:

Review generated code for accuracy and performance issues before implementation
Consider accessibility implications of generated visualizations
Ensure appropriate fallbacks for users with different abilities
Be aware that the model might make questionable visualization choices for certain data types
Deploy the model with proper monitoring to catch potential issues
Use model outputs as suggestions rather than definitive implementations for critical applications

How to Get Started with the Model

python

from transformers import AutoModelForCausalLM, AutoTokenizer
import torch

# Load model and tokenizer
model_name = "stigsfoot/gemma3-2b-caiti-acr-v1"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(
    model_name, 
    torch_dtype=torch.float16, 
    device_map="auto"
)

# Prepare input with visualization request
prompt = """
[INST] Given the following user request, select the most appropriate visualization component and explain your reasoning:

User request: "Show me a breakdown of energy usage by device for the last month"

Available components:
- BarChart
- PieChart
- LineChart
- TreeMap
- HeatMap
[/INST]
"""

# Generate response
inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
outputs = model.generate(
    inputs.input_ids,
    max_new_tokens=512,
    temperature=0.1,
    do_sample=True
)
response = tokenizer.decode(outputs[0], skip_special_tokens=True)
print(response)

For integration with the CAITI framework:

javascript

import { streamUI } from "ai/rsc";
import { generateFromFinetuned } from "./gemma-client";

// Inside your AI stream handler
async function* generateComponent({ content, done }) {
  // Use fine-tuned model instead of OpenAI
  const componentCode = await generateFromFinetuned({
    prompt: `Select visualization for: ${userRequest}`,
    model: "stigsfoot/gemma3-2b-caiti-acr-v1"
  });
  
  // Render component with the generated code
  return <DynamicComponent code={componentCode} />;
}

Training Details

Training Data

The model was fine-tuned on a specialized dataset consisting of:

Natural language requests paired with corresponding visualization component selections
React component code samples using Recharts, D3, and Tremor
Reasoning traces explaining visualization selection decisions
Diverse visualization scenarios covering different chart types and data structures

The dataset included approximately 1,000 examples spanning various visualization types, data structures, and user intents.

Training Procedure

Preprocessing

Training examples were formatted as instruction-response pairs with a consistent structure:

User instruction containing a visualization request
Reasoning about the optimal component selection
Code implementation of the selected component

Training Hyperparameters

Training regime: bf16 mixed precision
Number of epochs: 3
Learning rate: 2e-5
Batch size: 8
Weight decay: 0.01
Fine-tuning method: QLoRA with 4-bit quantization
LoRA rank: 64
LoRA alpha: 16
LoRA dropout: 0.05

Speeds, Sizes, Times

Training time: ~4 hours
Hardware used: A100 GPU
Checkpoint size: ~2.5GB
VRAM requirements during training: ~16GB

Evaluation

Testing Data, Factors & Metrics

Testing Data

A held-out test set of 100 novel visualization requests not seen during training, representing diverse user intents and visualization requirements.

Factors

The evaluation disaggregated results by:

Visualization type (bar, pie, line, etc.)
Data complexity (number of dimensions, time series vs. categorical)
Request specificity (explicit vs. implicit visualization requests)
Component library (Recharts, D3, Tremor)

Metrics

Component Selection Accuracy: Percentage of cases where the model selected the most appropriate visualization type
Code Syntax Correctness: Percentage of generated code that parsed without errors
Rendering Success: Percentage of components that successfully rendered
Inference Latency: Time from request to response
Memory Usage: RAM required during inference

Results

Summary

Metric	Score
Component Selection Accuracy	92.5%
Code Syntax Correctness	94.3%
Rendering Success	89.7%
Inference Latency (avg)	150ms
Memory Usage	5GB

The model performed best on bar charts, pie charts, and line charts (>95% accuracy), with moderately lower accuracy on more complex visualizations like heatmaps and treemaps (~85% accuracy).

Environmental Impact

Carbon emissions were estimated using the Machine Learning Impact calculator presented in Lacoste et al. (2019).

Hardware Type: NVIDIA A100 GPU
Hours used: 4
Cloud Provider: Google Cloud
Compute Region: us-central1
Carbon Emitted: ~0.5 kg CO₂eq

Technical Specifications

Model Architecture and Objective

Base architecture: Gemma 3 2B transformer model
Training objective: Next token prediction with instruction fine-tuning
Context length: 8192 tokens
Parameter count: ~2 billion parameters

Compute Infrastructure

Hardware

Google Colab Pro with NVIDIA A100 GPU
16GB VRAM
64GB RAM

Software

PyTorch 2.1.0
Transformers 4.36.0
PEFT 0.7.0
bitsandbytes 0.41.1

Citation

BibTeX:

@misc{gemma3-2b-caiti-acr-v1,
  author = {Noble Ackerson},
  title = {Gemma3-2B-CAITI-ACR-v1: Fine-tuned Gemma 3 for Visualization Component Reasoning},
  year = {2025},
  publisher = {HuggingFace},
  howpublished = {\url{https://huggingface.co/stigsfoot/gemma3-2b-caiti-acr-v1}}
}

APA:

Stigsfoot. (2025). Gemma3-2B-CAITI-ACR-v1: Fine-tuned Gemma 3 for Visualization Component Reasoning [Model]. Hugging Face. https://huggingface.co/stigsfoot/gemma3-2b-caiti-acr-v1

Glossary

ACR (Automated Component Reasoning): The model's ability to automatically select and generate appropriate visualization components based on user intent
CAITI (Contextual AI Translated Insights): The generative UI framework the model is designed to enhance
Recharts: A React charting library used in the training data
D3 (Data-Driven Documents): A JavaScript library for producing dynamic, interactive data visualizations
Tremor: A React library for building dashboards and data visualizations
QLoRA (Quantized Low-Rank Adaptation): The parameter-efficient fine-tuning method used
Generative UI: User interfaces that are dynamically generated based on user intent rather than pre-defined layouts

Model Card Authors

Noble Ackerson (@stigsfoot)

Model Card Contact

Please create an issue in the model repository for questions or feedback.