Tessa-T1-3B Open Source React Inference Model - Free to Generate High-Quality React Component Code

Tessa T1 3B

Developed by Tesslate

Tessa-T1 is a React-specific inference model fine-tuned based on Qwen2.5-Coder-3B-Instruct, specializing in generating high-quality React component code.

Large Language Model

Transformers

EnglishOpen Source License:Apache-2.0 #React Component Generation #Frontend Agent Integration #Semantic Code Reasoning

Downloads 77

Release Time : 3/24/2025

Model Overview

Tessa-T1 is an innovative React inference model designed specifically for React frontend development. It autonomously generates well-structured, semantically clear React components and can integrate with agent systems for automated web development.

Model Features

React-Specific Inference

Precisely generates fully functional and semantically clear React components

Agent Integration

Seamlessly adapts to AI-driven programming agents and autonomous frontend systems

Context-Aware Generation

Effectively understands and utilizes UI context to provide relevant code solutions

Model Capabilities

React Component Generation

Frontend Code Optimization

Semantic Code Generation

Agent System Integration

Use Cases

Automatic Component Generation

User Profile Card Component

Quickly generates a user profile card React component based on text prompts

Generates well-structured, semantically clear React component code

Calendar Component

Generates a fully functional calendar component based on prompts

Generates ready-to-use calendar component code

Agent-Driven Web Development

Automated Frontend Workflow

Integrates into automated programming systems to accelerate frontend development

Significantly improves frontend development efficiency

Frontend Refactoring

Code Optimization

Automatically optimizes and enhances React code semantics

Improves code quality and maintainability

🚀 Tessa-T1: React-Focused Reasoning Model

Tessa-T1 is an innovative React reasoning model based on the Transformer architecture. Fine-tuned from the powerful Qwen2.5-Coder-3B-Instruct base model, it can autonomously generate well-structured and semantic React components, serving as a powerful tool for web interface development and frontend code intelligence.

🚀 Quick Start

You can use the following code example to start using Tessa-T1:

from transformers import AutoModelForCausalLM, AutoTokenizer
model_name = "smirki/Tessa-T1"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")
prompt = """<|im_start|>user
Create a React component for a user profile card.<|im_end|>
<|im_start|>assistant
<|im_start|>think
"""
inputs = tokenizer(prompt, return_tensors="pt").to("cuda")
outputs = model.generate(**inputs, max_new_tokens=1500, do_sample=True, temperature=0.7)
print(tokenizer.decode(outputs[0], skip_special_tokens=True))

✨ Features

React-specific Reasoning: Accurately generates functional and semantic React components.
Agent Integration: Seamlessly fits into AI-driven coding agents and autonomous frontend systems.
Context-Aware Generation: Effectively understands and utilizes UI context to provide relevant code solutions.

💻 Usage Examples

Basic Usage

from transformers import AutoModelForCausalLM, AutoTokenizer
model_name = "smirki/Tessa-T1"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")
prompt = """<|im_start|>user
Create a React component for a user profile card.<|im_end|>
<|im_start|>assistant
<|im_start|>think
"""
inputs = tokenizer(prompt, return_tensors="pt").to("cuda")
outputs = model.generate(**inputs, max_new_tokens=1500, do_sample=True, temperature=0.7)
print(tokenizer.decode(outputs[0], skip_special_tokens=True))

📚 Documentation

Use Cases

Recommended Uses

Automatic Component Generation: Quickly produce React components from textual prompts.
Agent-based Web Development: Integrate into automated coding systems for faster frontend workflows.
Frontend Refactoring: Automate the optimization and semantic enhancement of React code.

Limitations

Focused on React: Limited use outside React.js frameworks.
Complex State Management: May require manual adjustments for highly dynamic state management scenarios.

Performance and Evaluation

Strengths:
- Strong semantic React component generation.
- Excellent integration capabilities with agent-based systems.
Weaknesses:
- Complex JavaScript logic may require manual post-processing.

🔧 Technical Details

Property	Details
Architecture	Transformer-based LLM
Base Model	Qwen2.5-Coder-3B-Instruct
Precision	bf16 mixed precision, quantized to q8
Hardware Requirements	Recommended 12GB VRAM
Software Dependencies	Hugging Face Transformers, PyTorch

📄 License

This project is licensed under the Apache 2.0 license.

📖 Citation

@misc{smirki_Tessa-T1,
  title={Tessa-T1: React-Focused Reasoning Model for Component Generation},
  author={tesslate},
  year={2025},
  publisher={Hugging Face},
  url={https://huggingface.co/tesslate/Tessa-T1}
}