alluri-ai-projects/ radix-ui-generation-react:latest

9 3 weeks ago

A specialized fine-tuned coding assistant based on **Qwen2.5-Coder**, optimized to generate production-ready, single-file React components adhering strictly to **Radix UI**, **Tailwind CSS**, and **TypeScript** design patterns while eliminating framework. 

ollama run alluri-ai-projects/radix-ui-generation-react

Details

3 weeks ago

3a8591f8b295 · 8.1GB

model
qwen2
·
7.62B
·
Q8_0
template
{{ if .System }}<|im_start|>system {{ .System }}<|im_end|> {{ end }}{{ if .Prompt }}<|im_start|>user
params
{ "num_ctx": 4096, "temperature": 0.1 }

Readme

Radix UI Coder Generation React

A specialized fine-tuned coding assistant based on Qwen2.5-Coder, optimized to generate production-ready, single-file React components adhering strictly to Radix UI, Tailwind CSS, and TypeScript design patterns while eliminating framework styling hallucinations.

Model Architecture & Technical Specifications

Attribute Specification
Base Model Qwen2.5-Coder (Fine-tuned via MLX LoRA adapters)
Quantization Format GGUF Q8_0 (8-bit optimization for local unified memory)
Inference Runtime Ollama (llama.cpp backend) / OpenAI-compatible API
Context Window 4,096 tokens (num_ctx)
Temperature 0.1 (deterministic output to suppress syntax/library hallucinations)
Primary Domain Single-file React 19, TypeScript, Radix UI primitives, and Zustand state management

Key Constraints & Guardrails

The model has been explicitly trained and constrained to adhere to the following architectural rules: 1. Single-File Scope: All sub-components, helper hooks, state stores, and skeleton fallbacks must be self-contained within a single exportable file to prevent multi-file import errors. 2. Strict UI Library Enforcement: - Uses Radix UI primitives and CSS variables exclusively. - Strictly prohibits Material UI syntax (createTheme, ThemeProvider). - Forbids invalid imports like useTheme from @radix-ui/themes (enforces next-themes pattern where applicable).

Local Setup & Installation

1. Prerequisites

Ensure you have Ollama installed and running on your local system.

2. Build the Model from GGUF

Place your quantized GGUF weights file (e.g., radix-ui-react-components-generation-aug-04-26.gguf) alongside the configuration Modelfile in a dedicated directory.

Modelfile Configuration:

FROM ./radix-ui-react-components-generation-aug-04-26.gguf

PARAMETER temperature 0.1
PARAMETER num_ctx 4096

TEMPLATE """{{ if .System }}<|im_start|>system
{{ .System }}<|im_end|>
{{ end }}{{ if .Prompt }}<|im_start|>user
{{ .Prompt }}<|im_end|>
{{ end }}<|im_start|>assistant
"""

3. Create the Ollama Registry Model

Run the following command in your model directory:

ollama create radix-ui-agent -f Modelfile

Verify the installation:

ollama list

Usage & Testing

Interactive Terminal Session

ollama run alluri-ai-projects/radix-ui-generation-react

One-Shot Generation

ollama run alluri-ai-projects/radix-ui-generation-react "Create a responsive Bento grid component using Radix UI primitives and Zustand."

Integrating with LangGraph / Python Backends

The local Ollama server exposes an OpenAI-compatible API endpoint on port 11434. Configure your LangChain or LangGraph agent backend (nodes.py) as follows:

from langchain_openai import ChatOpenAI

coder = ChatOpenAI(
    model="radix-ui-agent",
    openai_api_base="http://host.docker.internal:11434/v1",  # Or http://localhost:11434/v1 if running natively
    openai_api_key="ollama",  # Placeholder required by client wrapper
    temperature=0.1,
    max_tokens=1500
)