Model Card for Gemma3-2B-CAITI-ACR-v1

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

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:

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:

1. User instruction containing a visualization request
2. Reasoning about the optimal component selection
3. 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.