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.

HTS Code Finder Interface

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

  1. Intelligent Keyword Matching: Advanced algorithm that analyzes product descriptions
  2. Material-Based Classification: Interactive selection system for different product types
  3. Responsive Layout: Equal-width panels that adapt to screen size
  4. Dark Mode Support: Toggle between light and dark themes
  5. Toast Notifications: Real-time user feedback system
  6. 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


This project demonstrates the power of combining modern web technologies with intelligent algorithms to solve real-world business challenges in international trade.

Share this project:

Updates