Tesslate

/ ===== Adaptive Theme (works on dark blue or white backdrops) ===== / :root{ color-scheme: light dark; / Dark-default (great over navy/charcoal) / --bg: transparent; --panel: rgba(15,17,23,.55); --panel-solid: #0f1117; --ink: #eaf0ff; --muted: #a9b3c7; --brand: #5b8cff; / indigo / --brand-2: #45e7c6; / mint / --border: rgba(255,255,255,.14); --glow: rgba(91,140,255,.28); --code-bg: #0b1220; --code-br: #15233d; --pill: rgba(255,255,255,.05); --radius: 16px; } @media (prefers-color-scheme: light){ :root{ / Light-overrides (great over white/light backdrops) / --panel: rgba(255,255,255,.66); --panel-solid: #ffffff; --ink: #0b0c0f; --muted: #4a5568; --brand: #3b6dff; --brand-2: #22c6a3; --border: rgba(0,0,0,.12); --glow: rgba(59,109,255,.20); --code-bg: #f6f8ff; --code-br: #e4e8f7; --pill: rgba(0,0,0,.04); } } / Fallback: force light palette if host ignores color-scheme / .on-light{ --panel: rgba(255,255,255,.66) !important; --panel-solid: #ffffff !important; --ink: #0b0c0f !important; --muted: #4a5568 !important; --brand: #3b6dff !important; --brand-2: #22c6a3 !important; --border: rgba(0,0,0,.12) !important; --glow: rgba(59,109,255,.20) !important; --code-bg: #f6f8ff !important; --code-br: #e4e8f7 !important; --pill: rgba(0,0,0,.04) !important; } / ===== Layout & Components ===== / { box-sizing:border-box } .wrap{ background: var(--bg); padding: 28px; border-radius: 18px; } .hero{ background: radial-gradient(600px 240px at 20% 0%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%), radial-gradient(600px 240px at 80% 10%, color-mix(in oklab, var(--brand-2) 14%, transparent), transparent 60%); border:1px solid var(--border); border-radius:20px; padding:28px; backdrop-filter: saturate(120%) blur(10px); } .alert{ border:1px dashed var(--border); border-radius:14px; padding:12px 14px; margin-bottom:14px; background: color-mix(in oklab, var(--brand) 10%, var(--panel)); color: var(--ink); font-weight:700; } .kicker{ display:inline-block; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-size:.75rem; margin-bottom:.5rem } h1,h2,h3{ color:var(--ink); margin:0 0 .4rem 0; line-height:1.1 } h1{ font-size:2.25rem; font-weight:800 } h2{ font-size:1.3rem; font-weight:700; margin-top:1.25rem } h3{ font-size:1.05rem; font-weight:700 } p,li{ color:var(--muted); line-height:1.6 } hr{ border:none; height:1px; background:var(--border); margin:28px 0 } .tagline{ font-size:1.05rem; color: color-mix(in oklab, var(--ink) 78%, var(--muted)); } a.btn{ display:inline-block; padding:.7rem 1rem; border-radius:12px; background: linear-gradient(180deg,var(--brand), color-mix(in oklab, var(--brand) 65%, #2b50ff)); color:#fff; text-decoration:none; font-weight:600; box-shadow: 0 10px 30px var(--glow); } a.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); } .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; border:1px dashed var(--border); background: var(--pill); color: color-mix(in oklab, var(--ink) 70%, var(--muted)); } .grid{ display:grid; gap:18px } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media(max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } } .card{ background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, transparent), transparent); border:1px solid var(--border); border-radius: var(--radius); padding:16px; backdrop-filter: blur(6px) saturate(120%); } .codeblock{ background: var(--code-bg); border:1px solid var(--code-br); border-radius:12px; padding:8px; overflow:auto; margin: 1rem 0; } .codeblock pre{ margin:0; font-size:.92rem } figure.screens{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 0 0 } figure.screens img{ width:100%; border-radius:12px; border:1px solid var(--border) } table{ width:100%; border-collapse:collapse } th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) } th{ color: color-mix(in oklab, var(--brand) 70%, var(--ink)); } @@@ ALERT @@@ — Research Preview: some generations may not be ready for production. Use repeatpenalty or frequencypenalty at >= 1.1 Tesslate • UIGEN Series UIGEN-FX-4B-Preview FX = “Frontend Engineer.” This upgrade in the UIGEN line focuses on better visual polish , functional structure , and web-ready markup to ship cleaner, more complete websites from a single prompt. Open weights Web-only bias Mobile-first output Minimal JS by default UIGEN-FX-4B-Preview is a 4B parameter UI generation model tuned to behave like a frontend engineer across 22 Frameworks. Small enough for laptops and fast iteration, while keeping strong structure and visual consistency. FX emphasizes layout rhythm, spacing, and component composition to reduce cleanup work. from transformers import AutoModelForCausalLM, AutoTokenizer import torch modelid = "Tesslate/UIGEN-FX-4B-Preview" tok = AutoTokenizer.frompretrained(modelid) model = AutoModelForCausalLM.frompretrained( modelid, torchdtype=torch.bfloat16, devicemap="auto" ) prompt = """Make a single-file landing page for 'LatticeDB'. Style: modern, generous whitespace, Tailwind, rounded-xl, soft gradients. Sections: navbar, hero (headline + 2 CTAs), features grid, pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS.""" inputs = tok(prompt, returntensors="pt").to(model.device) out = model.generate(inputs, maxnewtokens=2200, temperature=0.6, topp=0.9) print(tok.decode(out[0], skipspecialtokens=True)) vllm serve Tesslate/UIGEN-FX-4B-Preview \ --host 0.0.0.0 --port 8000 \ --max-model-len 65536 \ --gpu-memory-utilization 0.92 python -m sglang.launchserver \ --model-path Tesslate/UIGEN-FX-4B-Preview \ --host 0.0.0.0 --port 5000 \ --mem-fraction-static 0.94 \ --attention-backend flashinfer \ --served-model-name UIGEN-FX-4B-Preview Tip: Lower temperature (0.4–0.6) yields stricter, cleaner markup; raise it for more visual variety. temperature 0.6 Balance creativity & consistency (lower if quantized) topp 0.9 Nucleus sampling topk 40 Optional vocab restriction maxnewtokens 1200–2500 Single-file sites often fit < 1800 repetitionpenalty 1.08–1.15 Reduces repetitive classes/markup Make a single-file landing page for "RasterFlow" (GPU video pipeline). Style: modern tech, muted palette, Tailwind, rounded-xl, subtle gradients. Sections: navbar, hero (big headline + 2 CTAs), logos row, features (3x cards), code block (copyable), pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS. Return ONLY the HTML code. Use an 8pt spacing system. Palette: slate with indigo accents. Typography scale: 14/16/18/24/36/56. Max width: 1200px. Avoid shadows > md; prefer borders/dividers; keep line-length ~68ch. BF16 ~8.1 GB Fastest, best fidelity GGUF Q5KM ~2.9 GB Great quality/size trade-off GGUF Q4KM ~2.5 GB Laptop-friendly Primary: React, Tailwind, Javascript, Static Site generators, Python Frontend WebUI Secondary: Component blocks (hero, pricing, FAQ) for manual composition Accessibility: headings/labels are encouraged; ARIA coverage may need review. Complex widgets: JS kept minimal unless requested; consider post-edit for heavy interactivity. Use rights-cleared assets when adding logos/images. Curate prompts responsibly; review outputs before production use. Base: Qwen/Qwen3-4B-Instruct-2507 Objective: Web-only bias; reward semantic structure, spacing rhythm, responsive blocks; improved visual polish vs earlier UIGEN releases. Data: Curated HTML/CSS/Tailwind snippets, component libraries, synthetic page specs & layout constraints. Recipe: SFT with format constraints → instruction tuning → preference optimization on style/structure. Context: effective ~64k; default generations sized for practical single-file pages. Examples: uigenoutput.tesslate.com Discord: discord.gg/EcCpcTv93U Website: tesslate.com “FX aims to ship what a frontend engineer would: clean structure first, pretty pixels second.” — Tesslate Team @misc{tesslateuigenfx4b2025, title = {UIGEN-FX-4B-Preview: Frontend Engineer-tuned web generation (Research Preview)}, author = {Tesslate Team}, year = {2025}, url = {https://huggingface.co/Tesslate/UIGEN-FX-4B-Preview} }

WEBGEN DEVSTRAL IMAGES. WEBGEN MODELS MAKE HTML CSS JS TAILWIND ONLY LANDING PAGES. IF YOU NEED REACT, PYTHON, OR OTHER LANGUAGES, CHECK OUT UIGEN-X, UIGENT, UIGEN SERIES. IT WAS TRAINED ON CUSTOM TEMPLATES, FED INTO GPT-OSS-120B ON 13X MI300XS TO CREATE THE DATASET. THEN SFT FINETUNED. APACHE 2.0. TRAINED BY QINGY2004.

UIGEN-FX FOCUSES ON FRONTEND DESIGN. THIS ONE IS SPECIFICALLY AGENTIC.

UIGEN-X-32B-0727 Reasoning Only UI Generation Model > Tesslate's Reasoning Only UI generation model built on Qwen3-32B architecture. Trained to systematically plan, architect, and implement complete user interfaces across modern development stacks. Live Examples: https://uigenoutput.tesslate.com Discord Community: https://discord.gg/EcCpcTv93U Website: https://tesslate.com UIGEN-X-32B-0727 implements Reasoning Only from the Qwen3 family - combining systematic planning with direct implementation. The model follows a structured thinking process: 1. Problem Analysis — Understanding requirements and constraints 2. Architecture Planning — Component structure and technology decisions 3. Design System Definition — Color schemes, typography, and styling approach 4. Implementation Strategy — Step-by-step code generation with reasoning This hybrid approach enables both thoughtful planning and efficient code generation, making it suitable for complex UI development tasks. UIGEN-X-32B-0727 supports 26 major categories spanning frameworks and libraries across 7 platforms: Web Frameworks - React: Next.js, Remix, Gatsby, Create React App, Vite - Vue: Nuxt.js, Quasar, Gridsome - Angular: Angular CLI, Ionic Angular - Svelte: SvelteKit, Astro - Modern: Solid.js, Qwik, Alpine.js - Static: Astro, 11ty, Jekyll, Hugo Styling Systems - Utility-First: Tailwind CSS, UnoCSS, Windi CSS - CSS-in-JS: Styled Components, Emotion, Stitches - Component Systems: Material-UI, Chakra UI, Mantine - Traditional: Bootstrap, Bulma, Foundation - Design Systems: Carbon Design, IBM Design Language - Framework-Specific: Angular Material, Vuetify, Quasar UI Component Libraries - React: shadcn/ui, Material-UI, Ant Design, Chakra UI, Mantine, PrimeReact, Headless UI, NextUI, DaisyUI - Vue: Vuetify, PrimeVue, Quasar, Element Plus, Naive UI - Angular: Angular Material, PrimeNG, ng-bootstrap, Clarity Design - Svelte: Svelte Material UI, Carbon Components Svelte - Headless: Radix UI, Reach UI, Ariakit, React Aria State Management - React: Redux Toolkit, Zustand, Jotai, Valtio, Context API - Vue: Pinia, Vuex, Composables - Angular: NgRx, Akita, Services - Universal: MobX, XState, Recoil Animation Libraries - React: Framer Motion, React Spring, React Transition Group - Vue: Vue Transition, Vueuse Motion - Universal: GSAP, Lottie, CSS Animations, Web Animations API - Mobile: React Native Reanimated, Expo Animations Icon Systems Lucide, Heroicons, Material Icons, Font Awesome, Ant Design Icons, Bootstrap Icons, Ionicons, Tabler Icons, Feather, Phosphor, React Icons, Vue Icons Web Development Complete coverage of modern web development from simple HTML/CSS to complex enterprise applications. Mobile Development - React Native: Expo, CLI, with navigation and state management - Flutter: Cross-platform mobile with Material and Cupertino designs - Ionic: Angular, React, and Vue-based hybrid applications Desktop Applications - Electron: Cross-platform desktop apps (Slack, VSCode-style) - Tauri: Rust-based lightweight desktop applications - Flutter Desktop: Native desktop performance Python Applications - Web UI: Streamlit, Gradio, Flask, FastAPI - Desktop GUI: Tkinter, PyQt5/6, Kivy, wxPython, Dear PyGui Development Tools Build tools, bundlers, testing frameworks, and development environments. 26 Languages and Approaches: JavaScript, TypeScript, Python, Dart, HTML5, CSS3, SCSS, SASS, Less, PostCSS, CSS Modules, Styled Components, JSX, TSX, Vue SFC, Svelte Components, Angular Templates, Tailwind, PHP UIGEN-X-32B-0727 includes 21 distinct visual style categories that can be applied to any framework: Modern Design Styles - Glassmorphism: Frosted glass effects with blur and transparency - Neumorphism: Soft, extruded design elements - Material Design: Google's design system principles - Fluent Design: Microsoft's design language Traditional & Classic - Skeuomorphism: Real-world object representations - Swiss Design: Clean typography and grid systems - Bauhaus: Functional, geometric design principles Contemporary Trends - Brutalism: Bold, raw, unconventional layouts - Anti-Design: Intentionally imperfect, organic aesthetics - Minimalism: Essential elements only, generous whitespace Thematic Styles - Cyberpunk: Neon colors, glitch effects, futuristic elements - Dark Mode: High contrast, reduced eye strain - Retro-Futurism: 80s/90s inspired futuristic design - Geocities/90s Web: Nostalgic early web aesthetics Experimental - Maximalism: Rich, layered, abundant visual elements - Madness/Experimental: Unconventional, boundary-pushing designs - Abstract Shapes: Geometric, non-representational elements Basic Structure To achieve the best results, use this prompting structure below: UIGEN-X-32B-0727 supports function calling for dynamic asset integration and enhanced development workflows. Dynamic Asset Loading: - Fetch relevant images during UI generation - Generate realistic content for components - Create cohesive color palettes from images - Optimize assets for web performance Multi-Step Development: - Plan application architecture - Generate individual components - Integrate components into pages - Apply consistent styling and theming - Test responsive behavior Content-Aware Design: - Adapt layouts based on content types - Optimize typography for readability - Create responsive image galleries - Generate accessible alt text Rapid Prototyping - Quick mockups for client presentations - A/B testing different design approaches - Concept validation with interactive prototypes Production Development - Component library creation - Design system implementation - Template and boilerplate generation Educational & Learning - Teaching modern web development - Framework comparison and evaluation - Best practices demonstration Enterprise Solutions - Dashboard and admin panel generation - Internal tool development - Legacy system modernization Hardware - GPU: 8GB+ VRAM recommended (RTX 3080/4070 or equivalent) - RAM: 16GB system memory minimum - Storage: 20GB for model weights and cache Software - Python: 3.8+ with transformers, torch, unsloth - Node.js: For running generated JavaScript/TypeScript code - Browser: Modern browser for testing generated UIs Integration - Compatible with HuggingFace transformers - Supports GGML/GGUF quantization - Works with text-generation-webui - API-ready for production deployment - Token Usage: Reasoning process increases token consumption - Complex Logic: Focuses on UI structure rather than business logic - Real-time Features: Generated code requires backend integration - Testing: Output may need manual testing and refinement - Accessibility: While ARIA-aware, manual a11y testing recommended Discord: https://discord.gg/EcCpcTv93U Website: https://tesslate.com Examples: https://uigenoutput.tesslate.com Join our community to share creations, get help, and contribute to the ecosystem. Built with Reasoning Only capabilities from Qwen3, UIGEN-X-32B-0727 represents a comprehensive approach to AI-driven UI development across the entire modern web development ecosystem.

Tesslate • Research Preview WEBGEN-4B-Preview A 4B web-only generator that turns one prompt into clean, responsive HTML/CSS/Tailwind . Small enough for laptops; opinionated for consistent, modern layouts. TRY IT HERE! Get on Designer Open weights Web-only bias Mobile-first output No external JS by default What it is WEBGEN-4B-Preview focuses solely on generating production-lean websites. It prefers semantic HTML, sane spacing, and modern component blocks (hero, grids, pricing, FAQ). Why 4B Small enough for local runs and fast iteration, while retaining strong structure/consistency for HTML/CSS/Tailwind output. from transformers import AutoModelForCausalLM, AutoTokenizer import torch modelid = "Tesslate/WEBGEN-4B-Preview" tok = AutoTokenizer.frompretrained(modelid) model = AutoModelForCausalLM.frompretrained( modelid, torchdtype=torch.bfloat16, devicemap="auto" ) prompt = """Make a single-file landing page for 'LatticeDB'. Style: modern, generous whitespace, Tailwind, rounded-xl, soft gradients. Sections: navbar, hero (headline + 2 CTAs), features grid, pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS.""" inputs = tok(prompt, returntensors="pt").to(model.device) out = model.generate(inputs, maxnewtokens=2000, temperature=0.7, topp=0.9) print(tok.decode(out[0], skipspecialtokens=True)) vllm serve Tesslate/WEBGEN-4B-Preview \ --host 0.0.0.0 --port 8000 \ --max-model-len 65536 \ --gpu-memory-utilization 0.92 python -m sglang.launchserver \ --model-path Tesslate/WEBGEN-4B-Preview \ --host 0.0.0.0 --port 5000 \ --mem-fraction-static 0.94 \ --attention-backend flashinfer \ --served-model-name webgen-4b > Tip: Lower temperature (e.g., `0.4–0.6`) yields stricter, cleaner markup. Raise it for more visual variety. temperature 0.6 Balance creativity & consistency (lower if quantized) topp 0.9 Nucleus sampling topk 40 Optional vocab restriction maxnewtokens 1200–2500 Single-file sites often fit < 1500 repetitionpenalty 1.1 Reduces repetitive classes/markup Make a single-file landing page for "RasterFlow" (GPU video pipeline). Style: modern tech, muted palette, Tailwind, rounded-xl, subtle gradients. Sections: navbar, hero (big headline + 2 CTAs), logos row, features (3x cards), code block (copyable), pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS. Return ONLY the HTML code. Use an 8pt spacing system. Palette: slate with indigo accents. Typography scale: 14/16/18/24/36/56. Max width: 1200px. Avoid shadows > md; prefer borders/dividers. BF16 8.05 GB Fastest, best fidelity GGUF Q5KM 2.89 GB Great quality/size trade-off GGUF Q4KM 2.5 GB Smallest comfortable for laptops - Primary: Generate complete, single-file websites (landing pages, marketing pages, simple docs) with semantic HTML and Tailwind classes. - Secondary: Component blocks (hero, pricing, FAQ) for manual composition. Accessibility: adds headings/labels but ARIA coverage may need review. JS widgets: kept light unless explicitly requested in prompt. Curate prompts appropriately. When using third-party logos/assets, ensure you have rights or use open sources. - Base: Qwen/Qwen3-4B-Instruct - Objective: Tight web-only bias; reward semantic structure, spacing rhythm, and responsiveness. - Data: Mixture of curated HTML/CSS/Tailwind snippets, component libraries, and synthetic page specs. - Recipe: SFT with format constraints → instruction tuning → style/rhythm preference optimization. - Context: effective ~64k; trained to keep default outputs within practical page length. - Examples: uigenoutput.tesslate.com - Discord: discord.gg/EcCpcTv93U - Website: tesslate.com “Why are good design models so expensive” — Tesslate Team Marketing page (product launch) SaaS pricing + FAQ Docs-style layout

> Tesslate's Reasoning Only UI generation model built on Qwen3-4B architecture. Trained to systematically plan, architect, and implement complete user interfaces across modern development stacks. Live Examples: https://uigenoutput.tesslate.com Discord Community: https://discord.gg/EcCpcTv93U Website: https://tesslate.com UIGEN-X-4B-0729 implements Reasoning Only from the Qwen3 family - combining systematic planning with direct implementation. The model follows a structured thinking process: 1. Problem Analysis — Understanding requirements and constraints 2. Architecture Planning — Component structure and technology decisions 3. Design System Definition — Color schemes, typography, and styling approach 4. Implementation Strategy — Step-by-step code generation with reasoning This hybrid approach enables both thoughtful planning and efficient code generation, making it suitable for complex UI development tasks. UIGEN-X-4B-0729 supports 26 major categories spanning frameworks and libraries across 7 platforms: Web Frameworks - React: Next.js, Remix, Gatsby, Create React App, Vite - Vue: Nuxt.js, Quasar, Gridsome - Angular: Angular CLI, Ionic Angular - Svelte: SvelteKit, Astro - Modern: Solid.js, Qwik, Alpine.js - Static: Astro, 11ty, Jekyll, Hugo Styling Systems - Utility-First: Tailwind CSS, UnoCSS, Windi CSS - CSS-in-JS: Styled Components, Emotion, Stitches - Component Systems: Material-UI, Chakra UI, Mantine - Traditional: Bootstrap, Bulma, Foundation - Design Systems: Carbon Design, IBM Design Language - Framework-Specific: Angular Material, Vuetify, Quasar UI Component Libraries - React: shadcn/ui, Material-UI, Ant Design, Chakra UI, Mantine, PrimeReact, Headless UI, NextUI, DaisyUI - Vue: Vuetify, PrimeVue, Quasar, Element Plus, Naive UI - Angular: Angular Material, PrimeNG, ng-bootstrap, Clarity Design - Svelte: Svelte Material UI, Carbon Components Svelte - Headless: Radix UI, Reach UI, Ariakit, React Aria State Management - React: Redux Toolkit, Zustand, Jotai, Valtio, Context API - Vue: Pinia, Vuex, Composables - Angular: NgRx, Akita, Services - Universal: MobX, XState, Recoil Animation Libraries - React: Framer Motion, React Spring, React Transition Group - Vue: Vue Transition, Vueuse Motion - Universal: GSAP, Lottie, CSS Animations, Web Animations API - Mobile: React Native Reanimated, Expo Animations Icon Systems Lucide, Heroicons, Material Icons, Font Awesome, Ant Design Icons, Bootstrap Icons, Ionicons, Tabler Icons, Feather, Phosphor, React Icons, Vue Icons Web Development Complete coverage of modern web development from simple HTML/CSS to complex enterprise applications. Mobile Development - React Native: Expo, CLI, with navigation and state management - Flutter: Cross-platform mobile with Material and Cupertino designs - Ionic: Angular, React, and Vue-based hybrid applications Desktop Applications - Electron: Cross-platform desktop apps (Slack, VSCode-style) - Tauri: Rust-based lightweight desktop applications - Flutter Desktop: Native desktop performance Python Applications - Web UI: Streamlit, Gradio, Flask, FastAPI - Desktop GUI: Tkinter, PyQt5/6, Kivy, wxPython, Dear PyGui Development Tools Build tools, bundlers, testing frameworks, and development environments. 26 Languages and Approaches: JavaScript, TypeScript, Python, Dart, HTML5, CSS3, SCSS, SASS, Less, PostCSS, CSS Modules, Styled Components, JSX, TSX, Vue SFC, Svelte Components, Angular Templates, Tailwind, PHP UIGEN-X-4B-0729 includes 21 distinct visual style categories that can be applied to any framework: Modern Design Styles - Glassmorphism: Frosted glass effects with blur and transparency - Neumorphism: Soft, extruded design elements - Material Design: Google's design system principles - Fluent Design: Microsoft's design language Traditional & Classic - Skeuomorphism: Real-world object representations - Swiss Design: Clean typography and grid systems - Bauhaus: Functional, geometric design principles Contemporary Trends - Brutalism: Bold, raw, unconventional layouts - Anti-Design: Intentionally imperfect, organic aesthetics - Minimalism: Essential elements only, generous whitespace Thematic Styles - Cyberpunk: Neon colors, glitch effects, futuristic elements - Dark Mode: High contrast, reduced eye strain - Retro-Futurism: 80s/90s inspired futuristic design - Geocities/90s Web: Nostalgic early web aesthetics Experimental - Maximalism: Rich, layered, abundant visual elements - Madness/Experimental: Unconventional, boundary-pushing designs - Abstract Shapes: Geometric, non-representational elements Basic Structure To achieve the best results, use this prompting structure below: UIGEN-X-4B-0729 supports function calling for dynamic asset integration and enhanced development workflows. Dynamic Asset Loading: - Fetch relevant images during UI generation - Generate realistic content for components - Create cohesive color palettes from images - Optimize assets for web performance Multi-Step Development: - Plan application architecture - Generate individual components - Integrate components into pages - Apply consistent styling and theming - Test responsive behavior Content-Aware Design: - Adapt layouts based on content types - Optimize typography for readability - Create responsive image galleries - Generate accessible alt text Rapid Prototyping - Quick mockups for client presentations - A/B testing different design approaches - Concept validation with interactive prototypes Production Development - Component library creation - Design system implementation - Template and boilerplate generation Educational & Learning - Teaching modern web development - Framework comparison and evaluation - Best practices demonstration Enterprise Solutions - Dashboard and admin panel generation - Internal tool development - Legacy system modernization Hardware - GPU: 8GB+ VRAM recommended (RTX 3080/4070 or equivalent) - RAM: 16GB system memory minimum - Storage: 20GB for model weights and cache Software - Python: 3.8+ with transformers, torch, unsloth - Node.js: For running generated JavaScript/TypeScript code - Browser: Modern browser for testing generated UIs Integration - Compatible with HuggingFace transformers - Supports GGML/GGUF quantization - Works with text-generation-webui - API-ready for production deployment - Token Usage: Reasoning process increases token consumption - Complex Logic: Focuses on UI structure rather than business logic - Real-time Features: Generated code requires backend integration - Testing: Output may need manual testing and refinement - Accessibility: While ARIA-aware, manual a11y testing recommended Discord: https://discord.gg/EcCpcTv93U Website: https://tesslate.com Examples: https://uigenoutput.tesslate.com Join our community to share creations, get help, and contribute to the ecosystem. Built with Reasoning Only capabilities from Qwen3, UIGEN-X-4B-0729 represents a comprehensive approach to AI-driven UI development across the entire modern web development ecosystem.

Tessa-Rust-T1, A Rust Focused Code Generation Model Tessa-Rust-T1 is a transformer-based Rust code generation model, fine-tuned from the powerful Qwen2.5-Coder-7B-Instruct base model. Designed specifically for Rust development, Tessa-Rust-T1 leverages advanced reasoning to autonomously generate well-structured, idiomatic Rust code, including functions, structs, traits, and modules. Its integration into agent systems makes it a powerful tool for automating backend development, systems programming, CLI tool creation, and Rust code intelligence. Collaborators - Work done by Ravi, Ernest, and the Tesslate Team. Support Or if you want to talk about AI - Community - 100 Invites left Model Highlights - Hybrid Reasoning: Turn on Reasoning with this system prompt (You can turn off reasoning by giving large instructions without instructing to generate the think tags): - - Rust-specific Reasoning: Accurately generates functional and idiomatic Rust code. - Agent Integration: Seamlessly fits into AI-driven coding agents and autonomous development systems. - Context-Aware Generation: Effectively understands and utilizes Rust project context, dependencies (crates), and language features (lifetimes, borrowing, traits) to provide relevant code solutions. Recommended Uses - Automatic Rust Code Generation: Quickly produce Rust functions, structs, modules, and boilerplate code from textual prompts. - Agent-based Rust Development: Integrate into automated coding systems for faster backend, systems, or tooling workflows. - Rust Code Refactoring: Automate the optimization and enhancement of Rust code for idiomaticity and performance. - Generating CLI Tools: Accelerate the creation of command-line applications. - Implementing API Endpoints: Speed up backend development by generating route handlers and data models. - Writing Unit Tests: Generate test cases for Rust functions and modules. Limitations - Focused on Rust: Limited use outside the Rust ecosystem. - Complex Logic/Lifetimes: May require manual adjustments for highly complex asynchronous patterns, intricate lifetime management, or extensive `unsafe` code blocks. - Build Configuration: May not fully automate `Cargo.toml` management or complex build scripts. - Strengths: - Strong idiomatic Rust code generation. - Excellent integration capabilities with agent-based systems. - Understanding of common Rust patterns and standard library usage. - Weaknesses: - Complex Rust logic (e.g., advanced generics, macros, intricate lifetimes, `unsafe` code) may require manual post-processing or refinement. - May hallucinate non-existent crate features or incorrect API usage for less common libraries. - Architecture: Transformer-based LLM - Base Model: Qwen2.5-Coder-7B-Instruct - Precision: bf16 mixed precision (quantization options like q8 might be available depending on final model release) - Hardware Requirements: Recommended 12GB+ VRAM for bf16 (may vary with quantization) - Software Dependencies: - Hugging Face Transformers (`transformers>=4.34`) - PyTorch (`torch>=2.0`) - Accelerate (`accelerate`) for optimized loading/inference GGUF Instructions Tessa/Tessa-Rust-T1-7B-Q80-GGUF This model was converted to GGUF format from `Tesslate/Tessa-Rust-T1-7B` using llama.cpp via the ggml.ai's GGUF-my-repo space. Refer to the original model card for more details on the model. Use with llama.cpp Install llama.cpp through brew (works on Mac and Linux) Note: You can also use this checkpoint directly through the usage steps listed in the Llama.cpp repo as well. Step 2: Move into the llama.cpp folder and build it with `LLAMACURL=1` flag along with other hardware-specific flags (for ex: LLAMACUDA=1 for Nvidia GPUs on Linux).

/ ===== Adaptive Theme (works on dark blue or white backdrops) ===== / :root{ color-scheme: light dark; / Dark-default (great over navy/charcoal) / --bg: transparent; --panel: rgba(15,17,23,.55); --panel-solid: #0f1117; --ink: #eaf0ff; --muted: #a9b3c7; --brand: #5b8cff; / indigo / --brand-2: #45e7c6; / mint / --border: rgba(255,255,255,.14); --glow: rgba(91,140,255,.28); --code-bg: #0b1220; --code-br: #15233d; --pill: rgba(255,255,255,.05); --radius: 16px; } @media (prefers-color-scheme: light){ :root{ / Light-overrides (great over white/light backdrops) / --panel: rgba(255,255,255,.66); --panel-solid: #ffffff; --ink: #0b0c0f; --muted: #4a5568; --brand: #3b6dff; --brand-2: #22c6a3; --border: rgba(0,0,0,.12); --glow: rgba(59,109,255,.20); --code-bg: #f6f8ff; --code-br: #e4e8f7; --pill: rgba(0,0,0,.04); } } / Fallback: force light palette if host ignores color-scheme / .on-light{ --panel: rgba(255,255,255,.66) !important; --panel-solid: #ffffff !important; --ink: #0b0c0f !important; --muted: #4a5568 !important; --brand: #3b6dff !important; --brand-2: #22c6a3 !important; --border: rgba(0,0,0,.12) !important; --glow: rgba(59,109,255,.20) !important; --code-bg: #f6f8ff !important; --code-br: #e4e8f7 !important; --pill: rgba(0,0,0,.04) !important; } / ===== Layout & Components ===== / { box-sizing:border-box } .wrap{ background: var(--bg); padding: 28px; border-radius: 18px; } .hero{ background: radial-gradient(600px 240px at 20% 0%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%), radial-gradient(600px 240px at 80% 10%, color-mix(in oklab, var(--brand-2) 14%, transparent), transparent 60%); border:1px solid var(--border); border-radius:20px; padding:28px; backdrop-filter: saturate(120%) blur(10px); } .alert{ border:1px dashed var(--border); border-radius:14px; padding:12px 14px; margin-bottom:14px; background: color-mix(in oklab, var(--brand) 10%, var(--panel)); color: var(--ink); font-weight:700; } .kicker{ display:inline-block; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-size:.75rem; margin-bottom:.5rem } h1,h2,h3{ color:var(--ink); margin:0 0 .4rem 0; line-height:1.1 } h1{ font-size:2.25rem; font-weight:800 } h2{ font-size:1.3rem; font-weight:700; margin-top:1.25rem } h3{ font-size:1.05rem; font-weight:700 } p,li{ color:var(--muted); line-height:1.6 } hr{ border:none; height:1px; background:var(--border); margin:28px 0 } .tagline{ font-size:1.05rem; color: color-mix(in oklab, var(--ink) 78%, var(--muted)); } a.btn{ display:inline-block; padding:.7rem 1rem; border-radius:12px; background: linear-gradient(180deg,var(--brand), color-mix(in oklab, var(--brand) 65%, #2b50ff)); color:#fff; text-decoration:none; font-weight:600; box-shadow: 0 10px 30px var(--glow); } a.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); } .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; border:1px dashed var(--border); background: var(--pill); color: color-mix(in oklab, var(--ink) 70%, var(--muted)); } .grid{ display:grid; gap:18px } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media(max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } } .card{ background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, transparent), transparent); border:1px solid var(--border); border-radius: var(--radius); padding:16px; backdrop-filter: blur(6px) saturate(120%); } .codeblock{ background: var(--code-bg); border:1px solid var(--code-br); border-radius:12px; padding:8px; overflow:auto; margin: 1rem 0; } .codeblock pre{ margin:0; font-size:.92rem } figure.screens{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 0 0 } figure.screens img{ width:100%; border-radius:12px; border:1px solid var(--border) } table{ width:100%; border-collapse:collapse } th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) } th{ color: color-mix(in oklab, var(--brand) 70%, var(--ink)); } @@@ ALERT @@@ — Research Preview: some generations may not be ready for production. Use repeatpenalty or frequencypenalty at >= 1.1 Tesslate • UIGEN Series UIGEN-FX-4B-RL-Preview FX = “Frontend Engineer.” This upgrade in the UIGEN line focuses on better visual polish , functional structure , and web-ready markup to ship cleaner, more complete websites from a single prompt. This model was trained on A11y, Axe, and Lighthouse scores to improve SEO, Accesibility, and reproducibility for users. Open weights Web-only bias Mobile-first output Minimal JS by default UIGEN-FX-4B-Preview is a 4B parameter UI generation model tuned to behave like a frontend engineer across 22 Frameworks. Small enough for laptops and fast iteration, while keeping strong structure and visual consistency. FX emphasizes layout rhythm, spacing, and component composition to reduce cleanup work. from transformers import AutoModelForCausalLM, AutoTokenizer import torch modelid = "Tesslate/UIGEN-FX-4B-Preview" tok = AutoTokenizer.frompretrained(modelid) model = AutoModelForCausalLM.frompretrained( modelid, torchdtype=torch.bfloat16, devicemap="auto" ) prompt = """Make a single-file landing page for 'LatticeDB'. Style: modern, generous whitespace, Tailwind, rounded-xl, soft gradients. Sections: navbar, hero (headline + 2 CTAs), features grid, pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS.""" inputs = tok(prompt, returntensors="pt").to(model.device) out = model.generate(inputs, maxnewtokens=2200, temperature=0.6, topp=0.9) print(tok.decode(out[0], skipspecialtokens=True)) vllm serve Tesslate/UIGEN-FX-4B-Preview \ --host 0.0.0.0 --port 8000 \ --max-model-len 65536 \ --gpu-memory-utilization 0.92 python -m sglang.launchserver \ --model-path Tesslate/UIGEN-FX-4B-Preview \ --host 0.0.0.0 --port 5000 \ --mem-fraction-static 0.94 \ --attention-backend flashinfer \ --served-model-name UIGEN-FX-4B-Preview Tip: Lower temperature (0.4–0.6) yields stricter, cleaner markup; raise it for more visual variety. temperature 0.6 Balance creativity & consistency (lower if quantized) topp 0.9 Nucleus sampling topk 40 Optional vocab restriction maxnewtokens 1200–2500 Single-file sites often fit < 1800 repetitionpenalty 1.08–1.15 Reduces repetitive classes/markup Make a single-file landing page for "RasterFlow" (GPU video pipeline). Style: modern tech, muted palette, Tailwind, rounded-xl, subtle gradients. Sections: navbar, hero (big headline + 2 CTAs), logos row, features (3x cards), code block (copyable), pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS. Return ONLY the HTML code. Use an 8pt spacing system. Palette: slate with indigo accents. Typography scale: 14/16/18/24/36/56. Max width: 1200px. Avoid shadows > md; prefer borders/dividers; keep line-length ~68ch. BF16 ~8.1 GB Fastest, best fidelity GGUF Q5KM ~2.9 GB Great quality/size trade-off GGUF Q4KM ~2.5 GB Laptop-friendly Primary: React, Tailwind, Javascript, Static Site generators, Python Frontend WebUI Secondary: Component blocks (hero, pricing, FAQ) for manual composition Accessibility: headings/labels are encouraged; ARIA coverage may need review. Complex widgets: JS kept minimal unless requested; consider post-edit for heavy interactivity. Use rights-cleared assets when adding logos/images. Curate prompts responsibly; review outputs before production use. Base: Qwen/Qwen3-4B-Instruct-2507 Objective: Web-only bias; reward semantic structure, spacing rhythm, responsive blocks; improved visual polish vs earlier UIGEN releases. Data: Curated HTML/CSS/Tailwind snippets, component libraries, synthetic page specs & layout constraints. Recipe: SFT with format constraints → instruction tuning → preference optimization on style/structure. Context: effective ~64k; default generations sized for practical single-file pages. Examples: uigenoutput.tesslate.com Discord: discord.gg/EcCpcTv93U Website: tesslate.com “FX aims to ship what a frontend engineer would: clean structure first, pretty pixels second.” — Tesslate Team @misc{tesslateuigenfx4b2025, title = {UIGEN-FX-4B-Preview: Frontend Engineer-tuned web generation (Research Preview)}, author = {Tesslate Team}, year = {2025}, url = {https://huggingface.co/Tesslate/UIGEN-FX-4B-Preview} }

Model Summary UIGEN-T1 is a 7-billion parameter transformer model fine-tuned on Qwen2.5-Coder-7B-Instruct. It is designed for reasoning-based UI generation, leveraging a complex chain-of-thought approach to produce robust HTML and CSS-based UI components. Currently, it is limited to basic applications such as dashboards, landing pages, and sign-up forms. Model Description UIGEN-T1 generates HTML and CSS-based UI layouts by reasoning through design principles. While it has a strong chain-of-thought reasoning process, it is currently limited to text-based UI elements and simpler frontend applications. The model excels at dashboards, landing pages, and sign-up forms, but lacks advanced interactivity (e.g., JavaScript-heavy functionalities). - Developed by: smirki - Shared by: smirki - Model type: Transformer-based - Language(s) (NLP): English - License: Apache 2.0 - Finetuned from model: Qwen2.5-Coder-7B-Instruct Model Sources - Repository: (Will be uploaded to GitHub soon) - Hosted on: Hugging Face - Demo: Coming soon Direct Use - Generates HTML and CSS code for basic UI elements - Best suited for dashboards, landing pages, and sign-up forms - Requires manual post-processing to refine UI outputs - May require using the word "answer" at the end of the input prompt to get better inference Downstream Use (optional) - Can be fine-tuned further for specific frontend frameworks (React, Vue, etc.) - May be integrated into no-code/low-code UI generation tools Out-of-Scope Use - Not suitable for complex frontend applications involving JavaScript-heavy interactions - May not generate fully production-ready UI code - Limited design variety – biased towards basic frontend layouts Biases - Strong bias towards basic frontend design patterns (may not generate creative or advanced UI layouts) - May produce repetitive designs due to limited training scope Limitations - Artifacting issues: Some outputs may contain formatting artifacts - Limited generalization: Performs best in HTML + CSS UI generation, but not robust for complex app logic - May require prompt engineering (e.g., adding "answer" to input for better results) Training Data - Based on: Qwen2.5-Coder-7B-Instruct - Fine-tuned on: UI-related datasets with reasoning-based HTML/CSS examples Training Procedure - Preprocessing: Standard text-tokenization using Hugging Face transformers - Training Precision: bf16 mixed precision quantized to q8 Testing Data, Factors & Metrics - Testing Data: Internal UI design-related datasets - Evaluation Factors: Bias towards basic UI components, robustness in reasoning, output quality - Metrics: Subjective evaluation based on UI structure, correctness, and usability Results - Strengths: - Good at reasoning-based UI layouts - Generates structured and valid HTML/CSS - Weaknesses: - Limited design diversity - Artifacting in outputs Model Architecture and Objective - Architecture: Transformer-based LLM fine-tuned for UI reasoning - Objective: Generate robust frontend UI layouts with chain-of-thought reasoning Compute Infrastructure - Hardware Requirements: 12GB VRAM reccomended - Software Requirements: - Transformers library (Hugging Face) - PyTorch More Information - GitHub Repository: (Coming soon) - Web Demo: (Coming soon) Model Card Contact - Contact: smirki on Hugging Face

This model is still in preview/beta. We're still working on it! This is just so the community can try out our new "Gradient Reasoning" that intends to break problems down and reason faster. You can use a system prompt to enable thinking: "First, think step-by-step to reach the solution. Enclose your entire reasoning process within and tags." You can try sampling params: Temp: 0.76, TopP: 0.62, Topk 30-68, Rep: 1.0, minp: 0.05

This is the model card of a 🤗 transformers model that has been pushed on the Hub. This model card has been automatically generated. - Developed by: [More Information Needed] - Funded by [optional]: [More Information Needed] - Shared by [optional]: [More Information Needed] - Model type: [More Information Needed] - Language(s) (NLP): [More Information Needed] - License: [More Information Needed] - Finetuned from model [optional]: [More Information Needed] - Repository: [More Information Needed] - Paper [optional]: [More Information Needed] - Demo [optional]: [More Information Needed] Users (both direct and downstream) should be made aware of the risks, biases and limitations of the model. More information needed for further recommendations. Carbon emissions can be estimated using the Machine Learning Impact calculator presented in Lacoste et al. (2019). - Hardware Type: [More Information Needed] - Hours used: [More Information Needed] - Cloud Provider: [More Information Needed] - Compute Region: [More Information Needed] - Carbon Emitted: [More Information Needed]

UIGEN-T1.5 is an advanced transformer-based UI generation model fine-tuned from Qwen2.5-Coder-3B-Instruct, specifically enhanced to produce stunning, modern, and unique frontend user interfaces. Leveraging sophisticated reasoning and chain-of-thought methodologies, UIGEN-T1.5 excels at generating highly structured and visually compelling HTML and CSS code, ideal for sleek dashboards, engaging landing pages, and intuitive sign-up forms. - Advanced UI Styles: Produces sleek, modern, and unique designs. - Chain-of-Thought Reasoning: Enhanced reasoning capabilities for accurate HTML/CSS layouts. - High Usability: Generates responsive and production-ready frontend code. See examples below showcasing UIGEN-T1.5-generated interfaces: Recommended Uses - Dashboards: Insightful and visually appealing data interfaces. - Landing Pages: Captivating and high-conversion web pages. - Authentication Screens: Elegant sign-up and login interfaces. Limitations - Limited Interactivity: Minimal JavaScript functionality, focusing on HTML/CSS. - Prompt Engineering: May require specific prompts (e.g., appending "answer"). - Strengths: - High-quality UI generation. - Strong reasoning capabilities for structured layouts. - Weaknesses: - Occasional repetitive design patterns. - Minor artifacting in complex designs. - 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 Contact & Community - Creator: smirki - Repository & Demo: Coming soon!

UIGEN-T1.5 is an advanced transformer-based UI generation model fine-tuned from Qwen2.5-Coder-3B-Instruct, specifically enhanced to produce stunning, modern, and unique frontend user interfaces. Leveraging sophisticated reasoning and chain-of-thought methodologies, UIGEN-T1.5 excels at generating highly structured and visually compelling HTML and CSS code, ideal for sleek dashboards, engaging landing pages, and intuitive sign-up forms. - Advanced UI Styles: Produces sleek, modern, and unique designs. - Chain-of-Thought Reasoning: Enhanced reasoning capabilities for accurate HTML/CSS layouts. - High Usability: Generates responsive and production-ready frontend code. See examples below showcasing UIGEN-T1.5-generated interfaces: Recommended Uses - Dashboards: Insightful and visually appealing data interfaces. - Landing Pages: Captivating and high-conversion web pages. - Authentication Screens: Elegant sign-up and login interfaces. Limitations - Limited Interactivity: Minimal JavaScript functionality, focusing on HTML/CSS. - Prompt Engineering: May require specific prompts (e.g., appending "answer"). - Strengths: - High-quality UI generation. - Strong reasoning capabilities for structured layouts. - Weaknesses: - Occasional repetitive design patterns. - Minor artifacting in complex designs. - 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 Contact & Community - Creator: smirki - Repository & Demo: Coming soon!

This repository contains GGUF quantized versions of qingy2024/UIGEN-T3-14B-Instruct. Available quantizations: - FP16 (full precision) - Q2K - Q3KL - Q3KM - Q3KS - Q4KM - Q4KS - Q5KM - Q5KS - Q6K - Q80 Original model This is a quantized version of qingy2024/UIGEN-T3-14B-Instruct.