This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

This project now includes an advanced Aspect-Based Sentiment Filter that analyzes customer reviews to determine sentiment (positive, negative, or neutral) for specific product aspects like "battery life", "display", "performance", etc.

1. Browse Products: View laptop products with detailed specifications
2. Open Sentiment Filter: Click the "Sentiment Filter" button in the results section
3. Enter Aspects: Type aspects you care about (e.g., "battery life, display, performance")
4. Apply Filter: Products are analyzed using AI and ranked by sentiment scores
5. View Results: Each product shows sentiment badges for the aspects you selected

• ✨ AI-Powered Analysis: Uses Hugging Face Gradio API (sathvik1223/Aspect_based_sentiment_analysis)
• 🎯 Smart Ranking: Products ranked by overall sentiment score
• � Automatic Aspect Detection: Extracts aspects from your search query automatically
• 🤝 Aspect Merging: Combines auto-detected aspects with manually added ones
• �💾 Caching: Results cached in localStorage for 24 hours for faster subsequent queries
• 🎨 Beautiful UI: Animated sentiment badges (positive/negative/neutral)
• 📱 Responsive: Works seamlessly on mobile and desktop
• 📊 Review-by-Review Breakdown: See sentiment for each individual review

Frontend Stack:

• React 19.1.1
• Vite 7.1.7
• Tailwind CSS 4.1.13
• @gradio/client 1.10.0
• GSAP 3.13.0 for animations
• Lucide React for icons

New Components:

• AspectFilterModal.jsx - Modal UI for aspect input
• SentimentBadge.jsx - Sentiment pill badges
• aspectSentimentService.js - API integration and caching

Data:

• /public/data/products.json - 8 laptop products with reviews

• Node.js (v18 or higher recommended)
• npm or yarn

1. Install dependencies:

npm install

Start the development server:

npm run dev

The application will open at http://localhost:5173

npm run build

npm run preview

npm run lint

1. Start the app and wait for products to load
2. Click "Sentiment Filter" button in the results section
3. Try these example aspects:
   • battery life, display
   • performance, build quality
   • keyboard, speakers, trackpad
4. Select a category (optional): Gaming, Ultrabook, Professional, etc.
5. Click "Apply Filter" and wait for analysis (may take 30-60 seconds)
6. View ranked products with sentiment badges

• 🟢 Positive (Green): Customers are happy with this aspect
• 🔴 Negative (Red): Customers are unhappy with this aspect
• ⚪ Neutral (Gray): Mixed or neutral sentiment

• Results are cached for 24 hours - re-analyzing same aspects is instant
• Analyzing all products may take 1-2 minutes on first run
• Use category filter to analyze fewer products faster
• Clear cache from browser DevTools if needed: localStorage.clear()

product-recommendation-s-ver-main/
├── public/
│   └── data/
│       └── products.json          # Product data with reviews
├── src/
│   ├── components/
│   │   ├── AspectFilterModal.jsx  # ABSA filter modal
│   │   ├── SentimentBadge.jsx     # Sentiment badges
│   │   ├── DotGrid.jsx            # Interactive background
│   │   └── DotGrid.css
│   ├── services/
│   │   └── aspectSentimentService.js  # ABSA API & caching
│   ├── App.jsx
│   ├── ProductRecommendationApp.jsx   # Main component
│   ├── main.jsx
│   ├── index.css                      # Global styles + ABSA styles
│   └── App.css
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md

The ABSA service connects to: sathvik1223/Aspect_based_sentiment_analysis

To modify caching settings, edit src/services/aspectSentimentService.js:

const CACHE_EXPIRY_HOURS = 24;  // Change cache duration

Edit public/data/products.json and add products with this structure:

{
  "id": 9,
  "product_name": "Product Name",
  "brand": "Brand",
  "category": "gaming|ultrabook|professional|business|budget",
  "reviews": [
    "Review text 1 mentioning various aspects",
    "Review text 2 with sentiment",
    "Review text 3 with opinions"
  ],
  // ... other product fields
}

• Check internet connection: API requires network access
• Try fewer products: Use category filter
• Clear cache: Run localStorage.clear() in browser console
• Check console logs: Open DevTools > Console for detailed errors

• Ensure public/data/products.json exists
• Check browser console for fetch errors
• Verify file path is correct

• First analysis takes longer (building cache)
• Subsequent analyses are much faster (cached)
• Reduce number of aspects (3-4 recommended)
• Use category filter to analyze fewer products

• Abdulla Shahensha Razwaa (22BCE9149)
• Binayak Sinha (22BCE8642)
• Vudathu Rahul (22BCE9172)
• Kanithi Tirumala Satya Sathvik (22BCE8492)

An AI-powered product recommendation system built with React, Vite, and Hugging Face's Aspect-Based Sentiment Analysis API. This capstone project combines modern web technologies with intelligent sentiment analysis to help users find the perfect products based on specific aspects they care about.

• AI-Powered Product Discovery - Modern, responsive interface for product search
• Aspect-Based Sentiment Analysis (ABSA) - Analyze products based on specific aspects using Hugging Face AI
• Automatic Aspect Detection - Extracts aspects from user search queries automatically
• Intelligent Product Ranking - Products ranked by sentiment scores for queried aspects
• Review-by-Review Analysis - See individual sentiment breakdown for each review
• Caching System - LocalStorage caching to improve performance and reduce API calls
• Fallback Analysis - Keyword-based sentiment analysis if API fails
• Visual Search (Image-based) - Upload an image to find visually similar products (configurable endpoint)
• Multilingual UI (EN/ES) - Switch language from the navbar

• Beautiful gradient animations and effects
• Interactive sentiment badges (positive/negative/neutral)
• Expandable review details with sentiment visualization
• Responsive design for all devices
• Real-time loading indicators
• Modal-based filtering interface

• Frontend Framework: React 19.1.1
• Build Tool: Vite 7.1.7
• Styling: Tailwind CSS 4.1.13 + Custom CSS
• Icons: Lucide React
• Animations: GSAP 3.13.0
• AI Integration: Hugging Face Gradio Client (@gradio/client)
• Language: JavaScript (ES6+)

• Node.js 16+ and npm

1. Clone the repository

git clone https://github.com/yourusername/product-recommendation-system.git
cd product-recommendation-system

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Open in browser

http://localhost:5173

## 📷 Visual Search Configuration

Set a visual search API endpoint that accepts `multipart/form-data` with field `image` and returns one of: `{results: []}`, `{products: []}`, or a raw array `[]`.

Create `.env` in the project root:

VITE_VISUAL_SEARCH_ENDPOINT=https://your-api/visual-search

Use the “Search by Image” button on the home page to upload a photo.

## 🌍 Multilingual Support

- Language selector is in the navbar (EN/ES).
- Add more languages by creating `src/i18n/locales/<lang>.json` mirroring the keys from `en.json`.
- The selected language is persisted in `localStorage` as `lang`.

1. Enter a product query in the search box
2. View all available products with detailed specifications

1. Enter a query mentioning specific aspects:
   • "laptop with good battery life and display"
   • "I need excellent performance and keyboard"
2. System automatically detects aspects
3. Products are analyzed and ranked by sentiment
4. View sentiment badges on each product

1. Click the "Sentiment Filter" button
2. Enter aspects (comma-separated): battery life, display, performance
3. Optionally select a product category
4. Click "Apply Filter"
5. View ranked products with sentiment analysis

1. Click "Review-by-Review Analysis" on any product card
2. See individual sentiment for each review
3. Understand how the overall sentiment was calculated

The system recognizes these aspects automatically:

User Search Query
    ↓
Aspect Extraction (if aspects mentioned)
    ↓
Load Product Data (8 products)
    ↓
For Each Product:
    ├─ For Each Review (4 reviews/product)
    │   ├─ Call Hugging Face API
    │   │   - Model: sathvik1223/Aspect_based_sentiment_analysis
    │   │   - Input: review text + aspects
    │   │   - Output: sentiment per aspect
    │   ├─ OR Use Fallback (keyword-based)
    │   └─ Store Result
    ├─ Aggregate All Reviews
    ├─ Calculate Sentiment Score
    └─ Cache Result
    ↓
Rank Products by Sentiment Score
    ↓
Display Results with Badges

import { Client } from "@gradio/client";

const client = await Client.connect("sathvik1223/Aspect_based_sentiment_analysis");
const result = await client.predict("/predict", {
  sentence: "The battery life is amazing but display is just okay",
  aspects: "battery life, display"
});

// Output: "battery life: positive, display: neutral"

product-recommendation-s-ver-main/
├── public/
│   └── data/
│       └── products.json          # Product data with reviews
├── src/
│   ├── components/
│   │   ├── AspectFilterModal.jsx  # Filter modal UI
│   │   ├── SentimentBadge.jsx     # Sentiment display badges
│   │   ├── ReviewAnalysisDetails.jsx # Review breakdown
│   │   └── DotGrid.jsx            # Background effects
│   ├── services/
│   │   └── aspectSentimentService.js # API integration & analysis
│   ├── ProductRecommendationApp.jsx  # Main app component
│   ├── App.jsx                    # App wrapper
│   ├── main.jsx                   # Entry point
│   ├── index.css                  # Global styles + ABSA styles
│   └── App.css                    # Component styles
├── ABSA_FEATURE_GUIDE.md          # Detailed ABSA documentation
├── AUTO_ASPECT_DETECTION.md       # Auto-detection guide
└── TESTING_GUIDE.md               # Testing instructions

# Test auto-aspect detection
"laptop with good battery life and display"
"I need excellent performance and keyboard quality"
"Looking for great build quality and speakers"

# Test manual filter
1. Click "Sentiment Filter"
2. Enter: "battery life, display, performance"
3. Apply filter

Open browser console (F12) to see:

• Aspect extraction logs
• API calls and responses
• Sentiment parsing process
• Aggregation calculations
• Final rankings

• Abdulla Shahensha Razwaa - 22BCE9149
• Binayak Sinha - 22BCE8642
• Vudathu Rahul - 22BCE9172
• Kanithi Tirumala Satya Sathvik - 22BCE8492

# Development
npm run dev          # Start dev server

# Production
npm run build        # Build for production
npm run preview      # Preview production build

# Linting
npm run lint         # Run ESLint

Enable image-based search by setting an endpoint that accepts multipart/form-data with the field image and returns results in one of these shapes: {results: []}, {products: []}, or a raw [].

1. Create a .env file (or copy .env.example):

VITE_VISUAL_SEARCH_ENDPOINT=https://your-api/visual-search

2. In the homepage, click “Search by Image”, upload a photo, and similar products will be fetched from your endpoint.

Notes

• Requests are cancelable via the app’s abort controller.
• Returned items are normalized to ensure each has an id.

The app now supports basic i18n for UI strings. A language selector is available in the navbar.

Current locales

• English (en)
• Spanish (es)

Add a new language

1. Create src/i18n/locales/<lang>.json
2. Copy keys from src/i18n/locales/en.json
3. The selected language is saved in localStorage under lang

• Check browser console for API errors
• Fallback keyword-based analysis should activate automatically
• Verify network connection for Hugging Face API

• Check if public/data/products.json exists
• Verify fetch API call in console
• Clear browser cache

This project is created as a capstone project for educational purposes.

• Hugging Face for the ABSA model (sathvik1223/Aspect_based_sentiment_analysis)
• React and Vite communities
• Tailwind CSS team
• Lucide Icons

• ABSA Feature Guide - Complete technical documentation
• Auto-Aspect Detection - Aspect extraction details
• Testing Guide - How to test features

Built with ❤️ for VIT Capstone Project 2025

• Add more product categories
• Implement product comparison feature
• Add sentiment trend visualization
• Support multiple languages
• Add user authentication
• Implement product wishlist

© Advanced Product Recommendation System | Capstone Project