HTS Code Finder - AI-Powered Trade Classification System
What Inspired This Project
The complexity of international trade classification inspired me to create an intelligent solution for finding Harmonized Tariff Schedule (HTS) codes. Traditional methods of tariff classification are time-consuming and error-prone, often requiring deep expertise in trade regulations. I wanted to build a system that could make this process accessible and efficient for businesses of all sizes.

What I Learned
During this project, I gained valuable insights into:
- Modern Web Development: Implementing responsive layouts with CSS Grid and Flexbox
- AI Integration: Building intelligent keyword matching algorithms for trade classification
- User Experience Design: Creating intuitive interfaces with interactive animations and real-time feedback
- Full-Stack Architecture: Connecting Flask backends with modern JavaScript frontends
- Trade Classification Systems: Understanding the structure and complexity of HTS codes
How I Built The Project
Backend Architecture
# Flask application structure
app/
├── main.py # Application entry point
├── routes/
│ ├── api.py # HTS classification endpoints
│ ├── auth.py # User authentication
│ └── chat.py # Interactive chat features
├── services/
│ ├── llm_service.py # AI classification logic
│ └── vector_store.py # Semantic search implementation
└── models/
└── database.py # Data persistence layer
Frontend Implementation
The user interface features a modern, responsive design with:
- Interactive material selection cards with hover animations
- Real-time form validation and user feedback
- Smooth CSS transitions using keyframe animations:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Key Features Implemented
- Intelligent Keyword Matching: Advanced algorithm that analyzes product descriptions
- Material-Based Classification: Interactive selection system for different product types
- Responsive Layout: Equal-width panels that adapt to screen size
- Dark Mode Support: Toggle between light and dark themes
- Toast Notifications: Real-time user feedback system
- Export Functionality: Download results in multiple formats
Challenges I Faced
1. Layout Consistency
Challenge: Creating equal-width panels that display properly across different screen sizes.
Solution: Implemented a dedicated HTSLayout.css file with flexbox architecture:
.main-container {
display: flex !important;
width: 100% !important;
min-height: calc(100vh - 120px) !important;
}
2. Classification Accuracy
Challenge: Ensuring accurate HTS code suggestions for diverse product types.
Solution: Developed a weighted scoring system that considers:
- Primary material composition
- Product functionality
- Industry-specific keywords
- Historical classification patterns
The scoring function implements: \(\text{Final Score} = \alpha \cdot \text{Material Score} + \beta \cdot \text{Keyword Score} + \gamma \cdot \text{Context Score}\)
3. User Experience Optimization
Challenge: Making the interface intuitive for users unfamiliar with trade classification.
Solution:
- Added interactive material selection with visual feedback
- Implemented progressive disclosure of complex information
- Created contextual help and explanatory tooltips
- Built a chat-like interface for natural interaction
4. Performance Optimization
Challenge: Ensuring fast response times for classification requests.
Solution:
- Implemented client-side caching for frequent searches
- Optimized database queries with proper indexing
- Added loading states and skeleton screens
- Used debounced input validation
Technical Stack
| Component | Technology |
|---|---|
| Backend | Python Flask |
| Frontend | HTML5, CSS3, JavaScript |
| Styling | Custom CSS with CSS Grid/Flexbox |
| Icons | Font Awesome |
| Fonts | Inter (Google Fonts) |
| Data Storage | File-based classification database |
Project Structure
tariff/
├── backend/
│ ├── app/
│ │ ├── main.py
│ │ ├── routes/
│ │ ├── services/
│ │ └── models/
│ └── run.py
├── frontend/
│ ├── static/
│ │ ├── css/
│ │ │ ├── style.css
│ │ │ └── HTSLayout.css
│ │ └── js/
│ │ └── main.js
│ └── templates/
│ └── chat.html
└── data/
└── vector_stores/
Future Enhancements
- [ ] Machine Learning Integration: Implement neural networks for improved classification accuracy
- [ ] API Integration: Connect with official government tariff databases
- [ ] Multi-language Support: Expand to support international product descriptions
- [ ] Mobile App: Native iOS/Android applications
- [ ] Bulk Processing: Upload and classify multiple products simultaneously
Links and Resources
- GitHub Repository
- Live Demo (Local Development)
- HTS Code Documentation
- Trade Classification Guide
This project demonstrates the power of combining modern web technologies with intelligent algorithms to solve real-world business challenges in international trade.
Log in or sign up for Devpost to join the conversation.