Project Info
π The
Inspiration
The inspiration for CRISHIRTS came from a frustrating experience we had while trying to create custom T-shirt designs for a local event. Traditional design tools were either too complex for non-designers or too simplistic for professional results. We watched small business owners struggle with expensive design software, while AI image generators produced beautiful art that looked terrible when actually printed on fabric. When we discovered FIBO's revolutionary JSON-native approach to image generation, we realized we had found the missing piece. Unlike traditional prompt-based AI that produces unpredictable results, FIBO's structured control meant we could create a system that would generate consistently professional, print-ready designs every single time. π― What We Built CRISHIRTS is a comprehensive AI-powered T-shirt design platform that leverages FIBO's most advanced features to solve real production challenges. π§ JSON-Native Design Intelligence We built a sophisticated system that translates natural language into FIBO's structured JSON parameters, automatically optimizing for T-shirt printing: π Advanced Multi-Step Refinement System We created an intelligent refinement engine that preserves FIBO's structured prompts while allowing complex multi-operation edits: Background Context Management: Prevents prompt bleeding between operations Multi-Edit Parsing: "add headphones and change the hat color to blue" β 2 precise operations Structured Prompt Preservation: Maintains FIBO's JSON structure across refinement chains π Hyper-Realistic Fabric Integration Using FIBO's professional parameters, we developed a compositing engine that eliminates the "sticker" look: Material-Specific Rendering: Cotton, polyester, and blend fabrics with realistic properties Fabric Light Interaction: Professional lighting simulation using FIBO's advanced controls Ink Absorption Modeling: Realistic printing effects based on fabric type π¬ Technical Deep Dive Leveraging FIBO's Structured Control The breakthrough came when we realized FIBO's JSON-native approach could solve the consistency problem plaguing AI-generated designs. We built a translation layer that converts user intent into precise FIBO parameters: π Professional Parameter Optimization We implemented T-shirt-specific parameter optimization that automatically adjusts FIBO's professional controls: Camera Angle Optimization: Front-facing for chest designs, angled for sleeve prints Lighting Adaptation: Enhanced contrast for dark fabrics using FIBO's lighting controls Color Palette Management: Automatic color avoidance for better fabric contrast HDR / 16-bit Output: Professional print quality using FIBO's advanced output formats π§© Background Context Isolation One of our biggest technical challenges was preventing context bleeding between operations. We solved this with a sophisticated background management system: π§ Major Challenges Overcome Challenge 1: Multi-Operation Parsing Problem: Instructions like "add headphones and change the hat color to blue" were being parsed incorrectly. Solution: We developed a priority-based parsing system that handles complex multi-edit operations: Challenge 2: Background Persistence Problem: Background contexts were bleeding between refinement operations, causing inconsistent results. Solution: We implemented a refinement chain system that maintains background state while preventing unwanted inference: Context Isolation: Each request operates in complete isolation Background Preservation: Explicit backgrounds persist across non-background operations Theme Prevention: Prevents automatic background addition from character themes Challenge 3: Realistic Fabric Integration Problem: AI-generated designs looked "pasted on" when composited onto T-shirts. Solution: We developed a hyper-realistic compositing engine using FIBO's professional parameters: Fabric Interaction Simulation: Models how ink absorbs into different materials Perspective Correction: Applies subtle warping for natural draping Light Scattering: Simulates fabric-specific light interaction π¨ FIBO Features We Mastered Image Generation (V2) Structured Prompt Generation HDR / 16-bit Output Transparent Background Generation Image Editing Suite Background Removal & Replacement GenFill Integration Enhancement Pipeline Advanced Compositing Multi-Layer Blending Professional Parameters Material Simulation π What We Learned FIBO's Game-Changing Advantages Deterministic Control Professional Quality Structured Refinement Commercial Safety Production Workflow Insights Context Management Parameter Optimization Multi-Step Processing User Experience Translation π Innovation Highlights JSON-Native Workflow Excellence Automated Parameter Optimization Refinement Chain Management Professional Output Pipeline Advanced Controllability Real-time Parameter Visualization T-shirt-Specific Presets Progressive Complexity Production-Ready Architecture Scalable Design Generation AR Try-On Integration Commercial Compliance π The Future of AI-Powered Design CRISHIRTS represents more than just a T-shirt design toolβit's a glimpse into the future of AI-powered creative workflows. By fully embracing FIBO's JSON-native approach, we've created a system that delivers the consistency and quality that professional designers demand while remaining accessible to everyday users. Built with passion for the FIBO Hackathon, showcasing the revolutionary potential of JSON-native AI image generation. π Hashtags
CRISHIRTS - AI-Powered T-Shirt Design Platform
CRISHIRTS is an AI-powered T-shirt design platform that leverages Bria FIBO's advanced image generation capabilities. The platform provides intuitive tools for creating, customizing, and visualizing custom apparel designs with professional-grade control and real-time preview.
β¨ Features
π¨ AI Design Generation
- Natural language to image generation using Bria FIBO
- Advanced parameter control (camera angles, lighting, colors)
- Real-time design refinement and editing
- Multiple style presets and customization options
π T-Shirt Mockup System
- Instant design overlay on T-shirt templates
- Multiple T-shirt colors and styles
- Real-time mockup updates
- Professional design placement
π± AR Try-On
- Augmented reality T-shirt visualization
- Real-time body tracking
- Interactive design preview
- Mobile-friendly experience
πΎ Design Management
- Save and organize designs
- Export in print-ready formats
- Design library with search and filters
- Batch processing capabilities
π Technology Stack
Frontend:
- React 18 with TypeScript
- Vite for build tooling
- Tailwind CSS + shadcn/ui components
- React Three Fiber for 3D mockup rendering
- @mediapipe/tasks-vision for AR body tracking
- Zustand for state management
Backend:
- Node.js with Express
- Bria FIBO API integration
- Sharp for image processing
- Canvas for mockup generation
- JSON Schema validation (Ajv)
π οΈ Setup Instructions
Prerequisites
- Node.js 18+
- Bria FIBO API key
Installation
- Clone the repository
git clone https://github.com/UnknownGod2011/CRISHIRT.git
cd CRISHIRT
- Install dependencies
# Frontend
npm install
# Backend
cd backend
npm install
- Environment Setup
# Backend (.env)
FIBO_API_KEY=your_fibo_api_key_here
PORT=5000
# Frontend (.env)
VITE_API_URL=http://localhost:5000
- Start the application
# Terminal 1 - Backend
cd backend
npm start
# Terminal 2 - Frontend
npm run dev
- Open in browser
http://localhost:5173
π¬ How It Works
- Enter Prompt: Describe your design idea in natural language
- AI Generation: FIBO creates professional designs from your prompt
- Customize: Adjust parameters like colors, lighting, and composition
- Preview: See your design on T-shirt mockups instantly
- Try On: Use AR to see how it looks on you
- Export: Save designs in print-ready formats
π― Use Cases
- Custom Apparel: Create unique T-shirt designs
- Small Businesses: Generate merchandise designs quickly
- Personal Projects: Design custom shirts for events or gifts
- Print Shops: Offer AI-powered design services
- Fashion Designers: Rapid prototyping and concept exploration
π§ API Endpoints
POST /api/generate # Generate design from prompt/parameters
POST /api/mockup # Create T-shirt mockup
POST /api/batch/generate # Start batch generation
GET /api/batch/:id/status # Check batch progress
POST /api/designs # Save design to library
GET /api/designs # List saved designs
POST /api/designs/export # Export design bundle
π§ͺ Testing
# Run unit tests
npm test
# Run property-based tests
npm run test:properties
# Run E2E tests
npm run test:e2e
π License
MIT License - See LICENSE file for details
π€ Contributing
This project was created for the FIBO Hackathon. For questions or collaboration opportunities, please reach out!
Built with β€οΈ using Bria FIBO AI
Empowering creativity through AI-powered design generation.
Analysis
View
Metric
No commits on this project resolved to a GitHub account.
Technology
- CSSIn code
- ExpressIn code
- HTMLIn code
- JavaScriptIn code
- OpenAIIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Node.jsClaimed
8 of 9 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
773 KB
Source files
108
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
UnknownGod2011/FIBO
137 files Β· 21.9 MB Β· @ 2729370
Structure
Interface
58 files Β· 42%Screens, components and styles rendered to the user.
Application logic
28 files Β· 20%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here β open the file browser to check anything the diagram implies.
Languages
- JavaScript55%
- TypeScript33%
- Markdown12%
- CSS0%
- Shell0%
- HTML0%
- Other (1)0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm Β· 75- @hookform/resolvers
- @radix-ui/react-accordion
- @radix-ui/react-alert-dialog
- @radix-ui/react-aspect-ratio
- @radix-ui/react-avatar
- @radix-ui/react-checkbox
- @radix-ui/react-collapsible
- @radix-ui/react-context-menu
- @radix-ui/react-dialog
- @radix-ui/react-dropdown-menu
- @radix-ui/react-hover-card
- @radix-ui/react-icons
- @radix-ui/react-label
- @radix-ui/react-menubar
- @radix-ui/react-navigation-menu
- @radix-ui/react-popover
- @radix-ui/react-progress
- @radix-ui/react-radio-group
- +57 more
backend/package.json
npm Β· 10- axios
- canvas
- cors
- deepmerge
- dotenv
- express
- node-fetch
- sharp
- +2 more
Declared in the repositoryβs manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This projectβs features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.