Code refactoring

HKUSTBNBConstant.py

@@ -0,0 +1,219 @@
+# HKUSTBNBConstant.py
+
+GET_ALL_NEIGHBORHOODS = """
+    SELECT DISTINCT NEIGHBOURHOOD 
+    FROM airbnb_master_data 
+    WHERE NEIGHBOURHOOD IS NOT NULL 
+    ORDER BY NEIGHBOURHOOD
+"""
+
+GET_NEIGHBORHOOD_LISTINGS = """
+    SELECT m.ID, m.NAME, m.HOST_NAME, m.NEIGHBOURHOOD,
+           m.LATITUDE, m.LONGITUDE, m.ROOM_TYPE, m.PRICE,
+           COUNT(r.LISTING_ID) as NUMBER_OF_REVIEWS, m.REVIEWS_PER_MONTH,
+           m.MINIMUM_NIGHTS, m.AVAILABILITY_365
+    FROM airbnb_master_data m
+    LEFT JOIN airbnb_reviews_data r ON m.ID = r.LISTING_ID
+    WHERE m.LATITUDE IS NOT NULL 
+    AND m.LONGITUDE IS NOT NULL 
+    AND m.NEIGHBOURHOOD = :neighborhood 
+    GROUP BY m.ID, m.NAME, m.HOST_NAME, m.NEIGHBOURHOOD,
+             m.LATITUDE, m.LONGITUDE, m.ROOM_TYPE, m.PRICE,
+             m.REVIEWS_PER_MONTH, m.MINIMUM_NIGHTS, m.AVAILABILITY_365
+    ORDER BY COUNT(r.LISTING_ID) DESC, m.PRICE ASC
+    FETCH FIRST :limit ROWS ONLY
+"""
+
+GET_LISTING_REVIEWS = """
+    SELECT REVIEW_DATE, REVIEWER_NAME, 
+           CASE 
+               WHEN LENGTH(COMMENTS) > 200 
+               THEN SUBSTR(COMMENTS, 1, 200) || '...'
+               ELSE COMMENTS 
+           END as COMMENTS
+    FROM AIRBNB_REVIEWS_DATA 
+    WHERE LISTING_ID = :listing_id 
+    AND ROWNUM <= 10
+    ORDER BY REVIEW_DATE DESC
+"""
+
+GET_LISTING_REVIEWS_FOR_SEARCH = """
+    SELECT COMMENTS
+    FROM AIRBNB_REVIEWS_DATA 
+    WHERE LISTING_ID = :listing_id 
+    AND COMMENTS IS NOT NULL
+    AND ROWNUM <= 10
+    ORDER BY REVIEW_DATE DESC
+"""
+
+GET_TRAFFIC_CAMERA_LOCATIONS = """
+    SELECT KEY, LATITUDE, LONGITUDE 
+    FROM TD_TRAFFIC_CAMERA_LOCATION 
+    WHERE KEY IN ({placeholders})
+    AND LATITUDE IS NOT NULL 
+    AND LONGITUDE IS NOT NULL
+"""
+
+DISCOUNT_INFO_TEMPLATE = """
+<div style='background-color: #e8f5e9; padding: 8px; margin: 10px 0; border-radius: 4px; border-left: 4px solid #4caf50;'>
+    <p style='margin: 2px 0; font-weight: bold; color: #2e7d32;'>{discount_percentage}% ENV PROTECTION DISCOUNT!</p>
+    <p style='margin: 2px 0; font-size: 0.85em;'>Avg. {avg_vehicle_count:.1f} vehicles across {observation_count} observations</p>
+</div>
+"""
+
+TRAFFIC_SPOT_INFO_TEMPLATE = """
+<div class='traffic-spot-info' style='margin: 10px 0; padding: 8px; background-color: #f0f8ff; border-radius: 4px; border-left: 4px solid #4285f4;'>
+    <p style='margin: 5px 0;'>
+        <strong>Nearest Traffic Spot:</strong> {spot_key}
+        <br/>
+        <strong>Distance:</strong> {distance_str}
+    </p>
+</div>
+"""
+
+RELEVANCE_INFO_TEMPLATE = """
+<div class='relevance-info' style='margin: 10px 0; padding: 8px; background-color: #f8f9fa; border-radius: 4px;'>
+    <p style='margin: 5px 0;'>
+        <strong>Match Score:</strong> {relevance_percentage:.0f}%
+        <br/>
+        <strong>Relevance:</strong> {relevance_features}
+        <br/>
+        <strong>Match Type:</strong> {matching_features}
+    </p>
+</div>
+"""
+
+POPUP_CONTENT_TEMPLATE = """
+<div style='min-width: 280px; max-width: 320px; padding: 15px;'>
+    <h4 style='margin: 0 0 10px 0; color: #2c3e50;'>{listing_name}</h4>
+    <p style='margin: 5px 0;'><strong>Host:</strong> {host_name}</p>
+    <p style='margin: 5px 0;'><strong>Room Type:</strong> {room_type}</p>
+    <p style='margin: 5px 0;'>{price_display}</p>
+    <p style='margin: 5px 0;'><strong>Reviews:</strong> {review_count:.0f}</p>
+    {discount_info}
+    {traffic_spot_info}
+    {relevance_info}
+</div>
+"""
+
+MAP_SCRIPT = """
+<script>
+function showTrafficSpot(lat, lng) {
+    var map = document.querySelector('.folium-map')._leaflet_map;
+    map.setView([lat, lng], 18);
+    map.eachLayer(function(layer) {
+        if (layer instanceof L.Marker) {
+            var latLng = layer.getLatLng();
+            if (Math.abs(latLng.lat - lat) < 0.0001 && Math.abs(latLng.lng - lng) < 0.0001) {
+                layer.openPopup();
+            }
+        }
+    });
+}
+</script>
+"""
+
+# HTML Templates for Streamlit UI
+SIDEBAR_HEADER = '<p class="sidebar-header">HKUST BNB+<BR/></p>'
+
+SIDEBAR_DIVIDER = '<hr style="margin: 20px 0; border: none; border-top: 1px solid #e0e0e0;">'
+
+TRAFFIC_EXPLANATION = """
+### How HKUST BNB+ Acheived (E)SG , use Traffic Spot from Department of Transport and do traffic analysis hence provided discount according 
+to the average traffic on the previous days.
+
+We use real-time traffic data to offer you the best possible rates:
+
+* **Blue Camera Icons**: Areas with very low traffic (less than 2 vehicles detected)
+  * Enjoy a peaceful stay with **20% DISCOUNT** on these properties!
+
+* **Orange Camera Icons**: Areas with moderate traffic (2-5 vehicles detected)
+  * Get a **10% DISCOUNT** on these properties!
+
+* **Purple Camera Icons**: Areas with heavier traffic (more than 5 vehicles)
+  * Standard rates apply for these properties
+
+Look for the blue connecting lines on the map to see which traffic spot affects each property!
+
+Remark : Currently only few traffic spot avaliable, in the future will provide more.
+"""
+
+SEARCH_EXPLANATION = """
+### How HKUST BNB+ Acheived E(S)G , use keyword to provided semantic relevance analysis to matches the require need from HKUST Student
+
+Our advanced search technology goes beyond simple keyword matching to understand the meaning behind your search terms:
+
+When you search for terms like "quiet," "convenient," or "spacious," our system:
+1. Analyzes both listing titles and actual guest reviews
+2. Understands the context and meaning (not just matching exact words)
+3. Ranks listings based on overall relevance to your search
+
+**Search Match Types:**
+* **"Strong match in title and reviews"** - Perfect matches in both property description and guest experiences
+* **"Strong match in listing title"** - Property description matches your needs very well
+* **"Strong match in reviews"** - Guest experiences align perfectly with what you're looking for
+* **"Better match in listing title/reviews"** - One source is more relevant than the other
+* **"Moderate semantic match"** - Some relevance but not a perfect match
+
+This helps you find properties that truly match what you're looking for, even if they don't use the exact words in your search!
+"""
+
+REVIEW_CARD_TEMPLATE = """
+<div class="review-card">
+    <div class="review-header">
+        {reviewer_name} - {review_date}
+    </div>
+    <div class="review-content">
+        {highlighted_comments}
+    </div>
+</div>
+"""
+
+LISTINGS_COUNT_INFO = "<p style='text-align:center; color:#4285f4;'>Showing {listings_limit} listings in {neighborhood}</p>"
+
+LISTING_CARD_TEMPLATE = """
+<div class="listing-card" style="background-color: {background_color}">
+    <h4 class="listing-title">{listing_name}</h4>
+    {price_display}
+    <p class="listing-info"> Room Type: {room_type}</p>
+    <p class="listing-info"> Reviews: {review_count:.0f}</p>
+    {relevance_info}
+</div>
+"""
+
+PRICE_DISPLAY_WITH_DISCOUNT = """<p class="listing-info"> Price : <span class="original-price">${original_price:.0f}</span> <span class="discounted-price">${discounted_price:.0f}</span> {discount_tag}</p>"""
+
+PRICE_DISPLAY_NORMAL = """<p class="listing-info"> Price : ${price:.0f}</p>"""
+
+RELEVANCE_INFO_LISTING = """<p class="listing-info">  Relevance: {relevance_percentage:.0f}% </p>"""
+
+TRAFFIC_DISCOUNT_DISPLAY = """
+<div style='background-color: #e8f5e9; padding: 5px; margin: 5px 0; border-radius: 4px; border-left: 3px solid #4caf50;'>
+    <p style='margin: 2px 0; color: #2e7d32;'><strong>{discount_info}</strong></p>
+    <p style='margin: 2px 0; font-size: 0.9em;'>Avg. {avg_vehicle_count:.1f} vehicles across {observation_count} observations</p>
+</div>
+"""
+
+TRAFFIC_POPUP_BASE = """
+<div style='min-width: 150px; padding: 10px;'>
+    <p style='margin: 5px 0;'><strong>Location ID:</strong> {location_id}</p>
+    {discount_display}
+"""
+
+TRAFFIC_RECORDS_HEADER = "<h4>Recent Records (showing {recent_count} of {total_count} total):</h4>"
+
+TRAFFIC_RECORD_ENTRY = """
+<div style='border-top: 1px solid #ccc; padding: 5px 0;'>
+    <p style='margin: 2px 0;'><strong>Time:</strong> {capture_time}</p>
+    <p style='margin: 2px 0;'><strong>Vehicles:</strong> {vehicle_count}</p>
+    {image_html}
+</div>
+"""
+
+TRAFFIC_IMAGE_HTML = """
+<img src='data:image/jpeg;base64,{base64_encoded}' 
+     style='max-width: 100px; max-height: 100px; margin: 5px 0;' 
+     alt='Processed Image'>
+"""
+
+TRAFFIC_NO_RECORDS = "<p>No records available</p>"

AirbnbMapVisualiser.py → HKUSTBNBVisualiser.py

@@ -6,11 +6,21 @@ from sentence_transformers import SentenceTransformer, util
 from geopy.distance import geodesic
 import logging
 
-# Import the TrafficSpotManager from TrafficSpot module
-from TrafficSpot import TrafficSpotManager
-
-
-class AirbnbMapVisualiser:
+from TDTrafficSpot import TrafficSpotManager
+from HKUSTBNBConstant import (
+    GET_ALL_NEIGHBORHOODS,
+    GET_NEIGHBORHOOD_LISTINGS,
+    GET_LISTING_REVIEWS,
+    GET_LISTING_REVIEWS_FOR_SEARCH,
+    DISCOUNT_INFO_TEMPLATE,
+    TRAFFIC_SPOT_INFO_TEMPLATE,
+    RELEVANCE_INFO_TEMPLATE,
+    POPUP_CONTENT_TEMPLATE,
+    MAP_SCRIPT
+)
+
+
+class HKUSTBNBVisualiser:
     def __init__(self):
         self.connection_params = {
             'user': 'slliac',
@@ -26,30 +36,19 @@ class AirbnbMapVisualiser:
             increment=1,
             getmode=oracledb.SPOOL_ATTRVAL_WAIT
         )
-
-        # Initialize TrafficSpotManager with minimal data
         self.traffic_manager = TrafficSpotManager(self.connection_params)
         logging.info(f"Traffic spots initialized, {len(self.traffic_manager.traffic_spots)} spots loaded")
-
-        # Initialize sentence transformer model
         try:
-            # Using a sentence transformer model specifically optimized for semantic search
             model_name = "sentence-transformers/all-MiniLM-L6-v2"
             self.model = SentenceTransformer(model_name)
             print(f"Loaded Sentence Transformer model: {model_name}")
         except Exception as e:
             print(f"Error loading model: {str(e)}")
             self.model = None
-
         try:
             self.neighborhoods = self.get_all_neighborhoods()
             self.cached_listings = {}
-            # Initialize a nested dictionary to store listings by neighborhood and limit
-            self.cached_listings = {}
-            # Pre-cache Southern neighborhood with default limit of 10
-            self.cached_listings["Southern"] = {}
-            self.cached_listings["Southern"][10] = self.get_neighborhood_listings("Southern", 10)
-            self.cached_embeddings = {}  # Cache for listing embeddings
+            self.cached_embeddings = {}
         except Exception as e:
             print(f"Initialization error: {str(e)}")
             self.neighborhoods = []
@@ -57,26 +56,18 @@ class AirbnbMapVisualiser:
             self.cached_embeddings = {}
 
     def find_nearest_traffic_spot(self, airbnb_lat, airbnb_lng, max_distance_km=0.7):
-        """Find the nearest traffic spot within max_distance_km kilometers of an Airbnb listing"""
         nearest_spot = None
         min_distance = float('inf')
-
-        # Check each traffic spot
         for spot in self.traffic_manager.traffic_spots:
             if not spot.is_valid():
                 continue
-
-            # Calculate distance in kilometers
             distance = geodesic(
                 (airbnb_lat, airbnb_lng),
                 (spot.latitude, spot.longitude)
             ).kilometers
-
-            # Update nearest if this spot is closer and within max distance
             if distance < min_distance and distance <= max_distance_km:
                 min_distance = distance
                 nearest_spot = spot
-
         if nearest_spot:
             return nearest_spot, min_distance
         else:
@@ -88,12 +79,7 @@ class AirbnbMapVisualiser:
             cursor = connection.cursor()
             cursor.prefetchrows = 50
             cursor.arraysize = 50
-            cursor.execute("""
-                SELECT DISTINCT NEIGHBOURHOOD 
-                FROM airbnb_master_data 
-                WHERE NEIGHBOURHOOD IS NOT NULL 
-                ORDER BY NEIGHBOURHOOD
-            """)
+            cursor.execute(GET_ALL_NEIGHBORHOODS)
             neighborhoods = [row[0] for row in cursor.fetchall()]
             return neighborhoods
         except Exception as e:
@@ -103,25 +89,12 @@ class AirbnbMapVisualiser:
             self.pool.release(connection)
 
     def get_neighborhood_listings(self, neighborhood, limit=10):
-        """
-        Get listings for a neighborhood with a specified limit.
-
-        Args:
-            neighborhood: The neighborhood to get listings for
-            limit: Maximum number of listings to return (10, 20, 30, 40, or 50)
-
-        Returns:
-            List of listings data
-        """
-        # Ensure limit is one of the allowed values
         if limit not in [10, 20, 30, 40, 50]:
-            limit = 10  # Default to 10 if invalid limit provided
+            limit = 10
 
-        # Check if we already have this neighborhood and limit cached
         if neighborhood in self.cached_listings and limit in self.cached_listings[neighborhood]:
             return self.cached_listings[neighborhood][limit]
 
-        # Initialize neighborhood in cache if needed
         if neighborhood not in self.cached_listings:
             self.cached_listings[neighborhood] = {}
 
@@ -130,22 +103,11 @@ class AirbnbMapVisualiser:
             cursor = connection.cursor()
             cursor.prefetchrows = 50
             cursor.arraysize = 50
-            cursor.execute("""
-                SELECT m.ID, m.NAME, m.HOST_NAME, m.NEIGHBOURHOOD,
-                       m.LATITUDE, m.LONGITUDE, m.ROOM_TYPE, m.PRICE,
-                       COUNT(r.LISTING_ID) as NUMBER_OF_REVIEWS, m.REVIEWS_PER_MONTH,
-                       m.MINIMUM_NIGHTS, m.AVAILABILITY_365
-                FROM airbnb_master_data m
-                LEFT JOIN airbnb_reviews_data r ON m.ID = r.LISTING_ID
-                WHERE m.LATITUDE IS NOT NULL 
-                AND m.LONGITUDE IS NOT NULL 
-                AND m.NEIGHBOURHOOD = :neighborhood 
-                GROUP BY m.ID, m.NAME, m.HOST_NAME, m.NEIGHBOURHOOD,
-                         m.LATITUDE, m.LONGITUDE, m.ROOM_TYPE, m.PRICE,
-                         m.REVIEWS_PER_MONTH, m.MINIMUM_NIGHTS, m.AVAILABILITY_365
-                ORDER BY COUNT(r.LISTING_ID) DESC, m.PRICE ASC
-                FETCH FIRST :limit ROWS ONLY
-            """, neighborhood=neighborhood, limit=limit)
+            cursor.execute(
+                GET_NEIGHBORHOOD_LISTINGS,
+                neighborhood=neighborhood,
+                limit=limit
+            )
 
             listings = cursor.fetchall()
             self.cached_listings[neighborhood][limit] = listings
@@ -160,18 +122,10 @@ class AirbnbMapVisualiser:
         connection = self.pool.acquire()
         try:
             cursor = connection.cursor()
-            cursor.execute("""
-                SELECT REVIEW_DATE, REVIEWER_NAME, 
-                       CASE 
-                           WHEN LENGTH(COMMENTS) > 200 
-                           THEN SUBSTR(COMMENTS, 1, 200) || '...'
-                           ELSE COMMENTS 
-                       END as COMMENTS
-                FROM AIRBNB_REVIEWS_DATA 
-                WHERE LISTING_ID = :listing_id 
-                AND ROWNUM <= 10
-                ORDER BY REVIEW_DATE DESC
-            """, listing_id=int(listing_id))
+            cursor.execute(
+                GET_LISTING_REVIEWS,
+                listing_id=int(listing_id)
+            )
 
             reviews = cursor.fetchall()
             formatted_reviews = []
@@ -192,26 +146,17 @@ class AirbnbMapVisualiser:
             self.pool.release(connection)
 
     def get_listing_reviews_for_search(self, listing_id):
-        """Get reviews for search analysis and handle LOB objects correctly"""
         connection = self.pool.acquire()
         try:
             cursor = connection.cursor()
-            cursor.execute("""
-                SELECT COMMENTS
-                FROM AIRBNB_REVIEWS_DATA 
-                WHERE LISTING_ID = :listing_id 
-                AND COMMENTS IS NOT NULL
-                AND ROWNUM <= 10
-                ORDER BY REVIEW_DATE DESC
-            """, listing_id=int(listing_id))
-
+            cursor.execute(
+                GET_LISTING_REVIEWS_FOR_SEARCH,
+                listing_id=int(listing_id)
+            )
             reviews = cursor.fetchall()
-
-            # Properly convert LOB objects to strings
             formatted_reviews = []
             for review in reviews:
                 if review[0] is not None:
-                    # Check if it's a LOB object and read it
                     if hasattr(review[0], 'read'):
                         formatted_reviews.append(review[0].read())
                     else:
@@ -225,35 +170,10 @@ class AirbnbMapVisualiser:
         finally:
             self.pool.release(connection)
 
-    def get_title_review_embeddings(self, title, reviews):
-        """Get separate embeddings for title and reviews using Sentence Transformer"""
-        if self.model is None:
-            return None, None
-
-        try:
-            # Encode the title
-            title_embedding = self.model.encode(title, convert_to_tensor=True)
-
-            # Encode reviews if available, otherwise return None
-            review_embedding = None
-            if reviews and len(reviews) > 0:
-                # Concatenate reviews into a single text to get embedding
-                review_text = " ".join(reviews[:5])  # Limit to first 5 reviews
-                review_embedding = self.model.encode(review_text, convert_to_tensor=True)
-
-            return title_embedding, review_embedding
-
-        except Exception as e:
-            print(f"Error getting embeddings: {str(e)}")
-            return None, None
-
     def compute_similarity(self, query_embedding, target_embedding):
-        """Compute cosine similarity between two embeddings"""
         if query_embedding is None or target_embedding is None:
             return 0.0
-
         try:
-            # Use the util function from sentence_transformers for cosine similarity
             similarity = util.pytorch_cos_sim(query_embedding, target_embedding).item()
             return similarity
         except Exception as e:
@@ -261,36 +181,24 @@ class AirbnbMapVisualiser:
             return 0.0
 
     def compute_search_scores(self, df, search_query):
-        """Compute search scores comparing query with title and reviews separately"""
         if not search_query or self.model is None:
             return [0.0] * len(df)
-
         try:
-            # Encode the search query
             query_key = f"query_{search_query}"
             if query_key not in self.cached_embeddings:
                 self.cached_embeddings[query_key] = self.model.encode(search_query, convert_to_tensor=True)
             query_embedding = self.cached_embeddings[query_key]
-
-            # Calculate similarity for each listing
             scores = []
-
             for idx, row in df.iterrows():
-                # Get title and reviews
                 title = str(row['name'])
                 reviews = self.get_listing_reviews_for_search(row['id'])
-
-                # Get or compute embeddings
                 title_key = f"title_{row['id']}"
                 review_key = f"review_{row['id']}"
-
                 if title_key not in self.cached_embeddings:
                     title_embedding = self.model.encode(title, convert_to_tensor=True)
                     self.cached_embeddings[title_key] = title_embedding
                 else:
                     title_embedding = self.cached_embeddings[title_key]
-
-                # Only compute review embedding if we have reviews
                 review_embedding = None
                 if reviews and len(reviews) > 0:
                     if review_key not in self.cached_embeddings:
@@ -299,23 +207,12 @@ class AirbnbMapVisualiser:
                         self.cached_embeddings[review_key] = review_embedding
                     else:
                         review_embedding = self.cached_embeddings[review_key]
-
-                # Compute similarities
                 title_similarity = self.compute_similarity(query_embedding, title_embedding)
                 review_similarity = 0.0
                 if review_embedding is not None:
                     review_similarity = self.compute_similarity(query_embedding, review_embedding)
-
-                # Calculate final score - emphasis on reviews if available
-                if review_embedding is not None:
-                    # Weight reviews more heavily if there are reviews
-                    final_score = title_similarity * 0.4 + review_similarity * 0.6
-                else:
-                    # Use only title similarity if no reviews
-                    final_score = title_similarity
-
+                final_score = title_similarity * 0.7 + review_similarity * 0.3 if review_embedding is not None else title_similarity
                 scores.append(final_score)
-
             return scores
 
         except Exception as e:
@@ -323,93 +220,18 @@ class AirbnbMapVisualiser:
             return [0.0] * len(df)
 
     def sort_by_relevance(self, df, search_query):
-        """Sort listings by relevance using sentence transformer comparison"""
         if not search_query:
             return df
-
-        # Compute semantic similarity scores
         scores = self.compute_search_scores(df, search_query)
         df['relevance_score'] = scores
         df['relevance_percentage'] = df['relevance_score'] * 100
-
-        # Add relevance description
-        def get_relevance_description(score):
-            if score >= 80:
-                return "Perfect match"
-            elif score >= 60:
-                return "Excellent match"
-            elif score >= 40:
-                return "Good match"
-            elif score >= 20:
-                return "Partial match"
-            else:
-                return "Low relevance"
-
-        df['relevance_features'] = df['relevance_percentage'].apply(get_relevance_description)
-
-        # Add match information about which part matched better
-        def get_match_source(row):
-            # Get title and reviews
-            title = str(row['name'])
-            reviews = self.get_listing_reviews_for_search(row['id'])
-
-            # Recompute individual similarities to determine match source
-            title_similarity = 0.0
-            review_similarity = 0.0
-
-            if self.model is not None:
-                query_embedding = self.model.encode(search_query, convert_to_tensor=True)
-                title_embedding = self.model.encode(title, convert_to_tensor=True)
-                title_similarity = self.compute_similarity(query_embedding, title_embedding)
-
-                if reviews and len(reviews) > 0:
-                    review_text = " ".join(reviews[:5])
-                    review_embedding = self.model.encode(review_text, convert_to_tensor=True)
-                    review_similarity = self.compute_similarity(query_embedding, review_embedding)
-
-            # Determine which source matched better
-            if title_similarity > 0.2 and review_similarity > 0:
-                return "Strong match in title and reviews"
-            elif title_similarity > 0.2 and review_similarity > 0.2:
-                return "Strong match in title and strong match in reviews"
-            elif title_similarity > 0.2:
-                return "Strong match in listing title"
-            elif review_similarity > 0.2:
-                return "Strong match in reviews"
-
-        # Only calculate match source if score is above threshold
-        df['matching_features'] = df.apply(
-            lambda row: get_match_source(row) if row['relevance_score'] > 0.2 else "Low semantic match",
-            axis=1
-        )
-
-        # Sort by relevance score
         return df.sort_values('relevance_score', ascending=False)
 
     def create_map_and_data(self, neighborhood="Sha Tin", show_traffic=True, center_lat=None, center_lng=None,
                             selected_id=None, search_query=None, current_page=1, items_per_page=3, listings_limit=10):
-        """
-        Create a map and dataframe of listings for a neighborhood
-
-        Args:
-            neighborhood: Neighborhood to get listings for
-            show_traffic: Whether to show traffic spots
-            center_lat: Center latitude for the map
-            center_lng: Center longitude for the map
-            selected_id: ID of the selected listing
-            search_query: Search query for filtering listings
-            current_page: Current page of pagination
-            items_per_page: Number of items per page
-            listings_limit: Maximum number of listings to display (10, 20, 30, 40, or 50)
-
-        Returns:
-            Tuple of (map, dataframe)
-        """
-        # Ensure listings_limit is valid
         if listings_limit not in [10, 20, 30, 40, 50]:
             listings_limit = 10
 
-        # Get the listings with the specified limit
         listings = self.get_neighborhood_listings(neighborhood, listings_limit)
 
         if not listings:
@@ -428,7 +250,6 @@ class AirbnbMapVisualiser:
             df[col] = pd.to_numeric(df[col], errors='coerce')
 
         if search_query:
-            # Use the sentence transformer semantic search
             df = self.sort_by_relevance(df, search_query)
 
         if df.empty:
@@ -444,79 +265,49 @@ class AirbnbMapVisualiser:
             tiles='OpenStreetMap'
         )
 
-        # Calculate pagination indices
-        total_items = len(df)
-        start_idx = (current_page - 1) * items_per_page
-        end_idx = min(start_idx + items_per_page, total_items)
-
-        # Get the current page's listings
-        current_page_df = df.iloc[start_idx:end_idx]
-
-        # Create a list to store all traffic spots we need to display
         all_traffic_spots_to_display = set()
-
-        # Find nearest traffic spots for ALL listings
         all_nearest_traffic_spots = {}
-
-        # First find all nearest traffic spots
         for idx, row in df.iterrows():
             nearest_spot, distance = self.find_nearest_traffic_spot(row['latitude'], row['longitude'])
             if nearest_spot:
                 all_nearest_traffic_spots[row['id']] = (nearest_spot, distance)
                 all_traffic_spots_to_display.add(nearest_spot.key)
 
-        # Create a feature group for connection lines
         lines_group = folium.FeatureGroup(name="Connection Lines")
         m.add_child(lines_group)
 
-        # Display all traffic spots
         if show_traffic and all_traffic_spots_to_display:
             self.traffic_manager.add_spots_to_map(m, all_traffic_spots_to_display)
 
-        # Add all Airbnb markers and connection lines
         for idx, row in df.iterrows():
             marker_id = f"marker_{row['id']}"
-            reviews = self.get_listing_reviews(row['id'])
-            review_button_key = f"review_btn_{row['id']}"
-
-            # Get traffic spot info if available for this listing
             traffic_spot_info = ""
             discount_info = ""
             discounted_price = row['price']
 
-            # Check if this listing has a nearest traffic spot
             if row['id'] in all_nearest_traffic_spots:
                 nearest_spot, distance = all_nearest_traffic_spots[row['id']]
-
-                # Get discount rate and apply to price
                 discount_rate = nearest_spot.get_discount_rate()
+
                 if discount_rate > 0:
                     discounted_price = row['price'] * (1 - discount_rate)
                     discount_percentage = int(discount_rate * 100)
 
-                    # Format discount info
-                    discount_info = f"""
-                        <div style='background-color: #e8f5e9; padding: 8px; margin: 10px 0; border-radius: 4px; border-left: 4px solid #4caf50;'>
-                            <p style='margin: 2px 0; font-weight: bold; color: #2e7d32;'>🎉 {discount_percentage}% ENV PROTECTION DISCOUNT!</p>
-                            <p style='margin: 2px 0;'>Original: ${row['price']:.0f} → Now: ${discounted_price:.0f}</p>
-                            <p style='margin: 2px 0; font-size: 0.85em;'>Avg. {nearest_spot.avg_vehicle_count:.1f} vehicles per observation</p>
-                        </div>
-                    """
+                    discount_info = DISCOUNT_INFO_TEMPLATE.format(
+                        discount_percentage=discount_percentage,
+                        original_price=row['price'],
+                        discounted_price=discounted_price,
+                        avg_vehicle_count=nearest_spot.avg_vehicle_count,
+                        observation_count=len(nearest_spot.dataset_rows)
+                    )
 
-                # Format distance for display (convert to meters if less than 1km)
                 distance_str = f"{distance:.2f} km" if distance >= 0.1 else f"{distance * 1000:.0f} meters"
 
-                traffic_spot_info = f"""
-                    <div class='traffic-spot-info' style='margin: 10px 0; padding: 8px; background-color: #f0f8ff; border-radius: 4px; border-left: 4px solid #4285f4;'>
-                        <p style='margin: 5px 0;'>
-                            <strong>Nearest Traffic Spot:</strong> {escape(str(nearest_spot.key))}
-                            <br/>
-                            <strong>Distance:</strong> {distance_str}
-                        </p>
-                    </div>
-                """
-
-                # Add connection lines for ALL listings with nearby traffic spots
+                traffic_spot_info = TRAFFIC_SPOT_INFO_TEMPLATE.format(
+                    spot_key=escape(str(nearest_spot.key)),
+                    distance_str=distance_str
+                )
+
                 folium.PolyLine(
                     locations=[
                         [row['latitude'], row['longitude']],
@@ -531,35 +322,28 @@ class AirbnbMapVisualiser:
 
             relevance_info = ""
             if search_query and 'relevance_percentage' in row and 'relevance_features' in row:
-                relevance_info = f"""
-                    <div class='relevance-info' style='margin: 10px 0; padding: 8px; background-color: #f8f9fa; border-radius: 4px;'>
-                        <p style='margin: 5px 0;'>
-                            <strong>Match Score:</strong> {row['relevance_percentage']:.0f}%
-                            <br/>
-                            <strong>Relevance:</strong> {row['relevance_features']}
-                            <br/>
-                            <strong>Match Type:</strong> {row['matching_features']}
-                        </p>
-                    </div>
-                """
-
-            # Show price with strikethrough if discounted
+                relevance_info = RELEVANCE_INFO_TEMPLATE.format(
+                    relevance_percentage=row['relevance_percentage'],
+                    relevance_features=row['relevance_features'],
+                    matching_features=row['matching_features']
+                )
+
             price_display = f"<strong>Price:</strong> ${row['price']:.0f}"
             if discount_info:
-                price_display = f"<strong>Price:</strong> <span style='text-decoration: line-through;'>${row['price']:.0f}</span> <span style='color: #2e7d32; font-weight: bold;'>${discounted_price:.0f}</span>"
-
-            popup_content = f"""
-                <div style='min-width: 280px; max-width: 320px; padding: 15px;'>
-                    <h4 style='margin: 0 0 10px 0; color: #2c3e50;'>{escape(str(row['name']))}</h4>
-                    <p style='margin: 5px 0;'><strong>Host:</strong> {escape(str(row['host_name']))}</p>
-                    <p style='margin: 5px 0;'><strong>Room Type:</strong> {escape(str(row['room_type']))}</p>
-                    <p style='margin: 5px 0;'>{price_display}</p>
-                    <p style='margin: 5px 0;'><strong>Reviews:</strong> {row['number_of_reviews']:.0f}</p>
-                    {discount_info}
-                    {traffic_spot_info}
-                    {relevance_info}
-                </div>
-            """
+                price_display = (f"<strong>Price:</strong> "
+                                 f"<span style='text-decoration: line-through;'>${row['price']:.0f}</span> "
+                                 f"<span style='color: #2e7d32; font-weight: bold;'>${discounted_price:.0f}</span>")
+
+            popup_content = POPUP_CONTENT_TEMPLATE.format(
+                listing_name=escape(str(row['name'])),
+                host_name=escape(str(row['host_name'])),
+                room_type=escape(str(row['room_type'])),
+                price_display=price_display,
+                review_count=row['number_of_reviews'],
+                discount_info=discount_info,
+                traffic_spot_info=traffic_spot_info,
+                relevance_info=relevance_info
+            )
 
             marker_color = 'green' if selected_id == row['id'] else 'red'
             marker = folium.Marker(
@@ -572,30 +356,7 @@ class AirbnbMapVisualiser:
             if selected_id is not None and row['id'] == selected_id:
                 marker._name = marker_id
 
-        # Add JavaScript function to help navigate to traffic spots
-        folium.Element("""
-            <script>
-            function showTrafficSpot(lat, lng) {
-                // Get the map object
-                var map = document.querySelector('.folium-map')._leaflet_map;
-
-                // Pan to the traffic spot and zoom in
-                map.setView([lat, lng], 18);
-
-                // Find and open the popup for the traffic spot marker
-                map.eachLayer(function(layer) {
-                    if (layer instanceof L.Marker) {
-                        var latLng = layer.getLatLng();
-                        if (Math.abs(latLng.lat - lat) < 0.0001 && Math.abs(latLng.lng - lng) < 0.0001) {
-                            layer.openPopup();
-                        }
-                    }
-                });
-            }
-            </script>
-        """).add_to(m)
-
-        # Add layer control to toggle connection lines
+        folium.Element(MAP_SCRIPT).add_to(m)
         folium.LayerControl().add_to(m)
 
         return m, df

TrafficSpot.py → TDTrafficSpot.py

@@ -5,46 +5,56 @@ import base64
 import numpy as np
 from html import escape
 from datasets import load_dataset
-from datetime import datetime, timedelta
-
-
-class TrafficSpot:
+from HKUSTBNBConstant import (
+    GET_TRAFFIC_CAMERA_LOCATIONS,
+    TRAFFIC_DISCOUNT_DISPLAY,
+    TRAFFIC_POPUP_BASE,
+    TRAFFIC_RECORDS_HEADER,
+    TRAFFIC_RECORD_ENTRY,
+    TRAFFIC_IMAGE_HTML,
+    TRAFFIC_NO_RECORDS
+)
+
+
+class TDTrafficSpot:
     def __init__(self, key, latitude, longitude, dataset_rows=None):
         self.key = key
         self.latitude = float(latitude) if latitude is not None else None
         self.longitude = float(longitude) if longitude is not None else None
-        self.dataset_rows = dataset_rows or []  # List of matching dataset rows (up to 5)
+        self.dataset_rows = dataset_rows or []
         self.avg_vehicle_count = self.calculate_avg_vehicle_count()
+        self.recent_display_rows = self.get_recent_display_rows()
 
     def is_valid(self):
         return self.latitude is not None and self.longitude is not None
 
+    def get_recent_display_rows(self, max_display=2):
+        if not self.dataset_rows:
+            return []
+
+        sorted_rows = sorted(self.dataset_rows, key=lambda x: x['capture_time'], reverse=True)
+        return sorted_rows[:max_display]
+
     def calculate_avg_vehicle_count(self):
-        """Calculate average vehicle count from the recent data"""
         if not self.dataset_rows:
             return 0
 
-        # Extract vehicle counts from dataset rows
         vehicle_counts = [row.get('vehicle_count', 0) for row in self.dataset_rows if 'vehicle_count' in row]
 
-        # If no valid counts are found, return 0
         if not vehicle_counts:
             return 0
 
-        # Calculate and return the average
         return np.mean(vehicle_counts)
 
     def get_discount_rate(self):
-        """Calculate discount rate based on average vehicle count"""
         if self.avg_vehicle_count < 2:
-            return 0.20  # 20% discount
+            return 0.20
         elif self.avg_vehicle_count < 5:
-            return 0.10  # 10% discount
+            return 0.10
         else:
-            return 0.0  # No discount
+            return 0.0
 
     def get_discount_info(self):
-        """Get discount information as a formatted string"""
         discount_rate = self.get_discount_rate()
 
         if discount_rate <= 0:
@@ -57,55 +67,50 @@ class TrafficSpot:
         discount_display = ""
 
         if "discount" in discount_info.lower() and "no" not in discount_info.lower():
-            discount_display = f"""
-                <div style='background-color: #e8f5e9; padding: 5px; margin: 5px 0; border-radius: 4px; border-left: 3px solid #4caf50;'>
-                    <p style='margin: 2px 0; color: #2e7d32;'><strong>🎉 {discount_info}</strong></p>
-                    <p style='margin: 2px 0; font-size: 0.9em;'>Avg. {self.avg_vehicle_count:.1f} vehicles per observation</p>
-                </div>
-            """
-
-        html = f"""
-            <div style='min-width: 150px; padding: 10px;'>
-                <p style='margin: 5px 0;'><strong>Location ID:</strong> {escape(str(self.key))}</p>
-                {discount_display}
-        """
-
-        if self.dataset_rows:
-            html += "<h4>Recent Records:</h4>"
-            for row in self.dataset_rows:
-                # Convert binary processed_image to base64
+            discount_display = TRAFFIC_DISCOUNT_DISPLAY.format(
+                discount_info=discount_info,
+                avg_vehicle_count=self.avg_vehicle_count,
+                observation_count=len(self.dataset_rows)
+            )
+
+        html = TRAFFIC_POPUP_BASE.format(
+            location_id=escape(str(self.key)),
+            discount_display=discount_display
+        )
+
+        recent_rows = self.recent_display_rows
+
+        if recent_rows:
+            html += TRAFFIC_RECORDS_HEADER.format(
+                recent_count=len(recent_rows),
+                total_count=len(self.dataset_rows)
+            )
+
+            for row in recent_rows:
                 image_data = row.get('processed_image')
                 image_html = ""
                 if image_data:
                     try:
-                        # Encode binary data to base64
                         base64_encoded = base64.b64encode(image_data).decode('utf-8')
-                        # Create img tag with base64 data
-                        image_html = f"""
-                            <img src='data:image/jpeg;base64,{base64_encoded}' 
-                                 style='max-width: 100px; max-height: 100px; margin: 5px 0;' 
-                                 alt='Processed Image'>
-                        """
+                        image_html = TRAFFIC_IMAGE_HTML.format(base64_encoded=base64_encoded)
                     except Exception as e:
                         logging.error(f"Error encoding image for {self.key}: {str(e)}")
                         image_html = "<p>Image load failed</p>"
 
-                html += f"""
-                    <div style='border-top: 1px solid #ccc; padding: 5px 0;'>
-                        <p style='margin: 2px 0;'><strong>Time:</strong> {escape(str(row['capture_time']))}</p>
-                        <p style='margin: 2px 0;'><strong>Vehicles:</strong> {escape(str(row['vehicle_count']))}</p>
-                        {image_html}
-                    </div>
-                """
+                html += TRAFFIC_RECORD_ENTRY.format(
+                    capture_time=escape(str(row['capture_time'])),
+                    vehicle_count=escape(str(row['vehicle_count'])),
+                    image_html=image_html
+                )
         else:
-            html += "<p>No recent records available</p>"
+            html += TRAFFIC_NO_RECORDS
 
         html += "</div>"
         return html
 
     def add_to_map(self, folium_map):
         if self.is_valid():
-            # Choose color based on traffic level
+
             if self.avg_vehicle_count < 2:
                 color = 'blue'  # Low traffic - 20% discount
             elif self.avg_vehicle_count < 5:
@@ -124,64 +129,63 @@ class TrafficSpotManager:
     def __init__(self, connection_params):
         self.connection_params = connection_params
         self.traffic_spots = []
-        self.spot_dict = {}  # For quick lookup by key
-        # Only load limited spots when initialized
+        self.spot_dict = {}
         self.load_limited_traffic_spots()
 
     def load_limited_traffic_spots(self, limit=10):
-        """Load only a very limited set of traffic spots initially"""
         try:
             dataset = load_dataset("slliac/isom5240-td-application-traffic-analysis", split="application")
-            dataset_list = [row for row in dataset]
-            dataset_list.sort(key=lambda x: x['capture_time'], reverse=True)
+            dataset_list = list(dataset)
 
-            # Limit to just a few samples
-            dataset_dict = {}
-            unique_count = 0
+            location_data = {}
             for row in dataset_list:
                 loc_id = row['location_id']
-                if unique_count >= limit:
-                    break
+                if loc_id not in location_data:
+                    location_data[loc_id] = []
+                location_data[loc_id].append(row)
 
-                if loc_id not in dataset_dict:
-                    dataset_dict[loc_id] = []
-                    unique_count += 1
+            if len(location_data) > limit:
+                recent_activities = {}
+                for loc_id, rows in location_data.items():
+                    if rows:
+                        most_recent = max(rows, key=lambda x: x['capture_time'])
+                        recent_activities[loc_id] = most_recent['capture_time']
 
-                if len(dataset_dict[loc_id]) < 10:  # Store up to 10 records for averaging
-                    dataset_dict[loc_id].append(row)
+                top_locations = sorted(recent_activities.items(), key=lambda x: x[1], reverse=True)[:limit]
+                selected_locations = [loc_id for loc_id, _ in top_locations]
 
-            unique_locations = list(dataset_dict.keys())
-            location_ids = tuple(unique_locations) if unique_locations else ('',)
+                location_data = {loc_id: location_data[loc_id] for loc_id in selected_locations}
+
+            if not location_data:
+                logging.warning("No locations found in dataset")
+                return
+
+            location_ids = tuple(location_data.keys())
 
             with oracledb.connect(**self.connection_params) as conn:
                 cursor = conn.cursor()
-                query = """
-                    SELECT KEY, LATITUDE, LONGITUDE 
-                    FROM TD_TRAFFIC_CAMERA_LOCATION 
-                    WHERE KEY IN ({})
-                    AND LATITUDE IS NOT NULL 
-                    AND LONGITUDE IS NOT NULL
-                """.format(','.join([':' + str(i + 1) for i in range(len(location_ids))]))
+
+                placeholders = ','.join([':' + str(i + 1) for i in range(len(location_ids))])
+
+                query = GET_TRAFFIC_CAMERA_LOCATIONS.format(placeholders=placeholders)
 
                 cursor.execute(query, location_ids)
                 spots = cursor.fetchall()
 
                 self.traffic_spots = [
-                    TrafficSpot(
+                    TDTrafficSpot(
                         spot[0],
                         spot[1],
                         spot[2],
-                        dataset_dict.get(spot[0])
+                        location_data.get(spot[0], [])
                     )
                     for spot in spots
                 ]
 
-                # Build lookup dictionary
                 for spot in self.traffic_spots:
                     self.spot_dict[spot.key] = spot
 
-                conn.commit()
-                logging.info(f"Loaded {len(self.traffic_spots)} limited traffic spots")
+                logging.info(f"Loaded {len(self.traffic_spots)} traffic spots with full historical data")
 
         except Exception as e:
             logging.error(f"Error loading traffic spots: {str(e)}")
@@ -189,8 +193,6 @@ class TrafficSpotManager:
             self.spot_dict = {}
 
     def load_specific_traffic_spots(self, keys):
-        """Load specific traffic spots by their keys"""
-        # Filter out keys we already have
         needed_keys = [key for key in keys if key not in self.spot_dict]
 
         if not needed_keys:
@@ -198,77 +200,58 @@ class TrafficSpotManager:
 
         try:
             dataset = load_dataset("slliac/isom5240-td-application-traffic-analysis", split="application")
-            dataset_list = [row for row in dataset]
-            dataset_list.sort(key=lambda x: x['capture_time'], reverse=True)
+            dataset_list = list(dataset)
 
-            dataset_dict = {}
+            location_data = {}
             for row in dataset_list:
                 loc_id = row['location_id']
                 if loc_id in needed_keys:
-                    if loc_id not in dataset_dict:
-                        dataset_dict[loc_id] = []
-                    if len(dataset_dict[loc_id]) < 10:  # Store up to 10 records for averaging
-                        dataset_dict[loc_id].append(row)
+                    if loc_id not in location_data:
+                        location_data[loc_id] = []
+                    location_data[loc_id].append(row)
 
-            # Only load if we have keys to load
-            if needed_keys:
+            if location_data and needed_keys:
                 with oracledb.connect(**self.connection_params) as conn:
                     cursor = conn.cursor()
 
-                    # Prepare placeholders for the IN clause
                     placeholders = ','.join([':' + str(i + 1) for i in range(len(needed_keys))])
 
-                    query = f"""
-                        SELECT KEY, LATITUDE, LONGITUDE 
-                        FROM TD_TRAFFIC_CAMERA_LOCATION 
-                        WHERE KEY IN ({placeholders})
-                        AND LATITUDE IS NOT NULL 
-                        AND LONGITUDE IS NOT NULL
-                    """
+                    query = GET_TRAFFIC_CAMERA_LOCATIONS.format(placeholders=placeholders)
 
                     cursor.execute(query, tuple(needed_keys))
                     spots = cursor.fetchall()
 
                     new_spots = [
-                        TrafficSpot(
+                        TDTrafficSpot(
                             spot[0],
                             spot[1],
                             spot[2],
-                            dataset_dict.get(spot[0])
+                            location_data.get(spot[0], [])
                         )
                         for spot in spots
                     ]
 
-                    # Add to our collections
                     for spot in new_spots:
                         self.spot_dict[spot.key] = spot
                         self.traffic_spots.append(spot)
 
-                    conn.commit()
-                    logging.info(f"Loaded {len(new_spots)} additional traffic spots")
+                    logging.info(f"Loaded {len(new_spots)} additional traffic spots with full historical data")
 
         except Exception as e:
             logging.error(f"Error loading specific traffic spots: {str(e)}")
 
     def add_spots_to_map(self, folium_map, spot_keys=None):
-        """Add only specific spots to map"""
         if spot_keys is None:
-            # If no keys specified, add all loaded spots
             for spot in self.traffic_spots:
                 spot.add_to_map(folium_map)
         else:
-            # Add only the specified spots
             for key in spot_keys:
                 if key in self.spot_dict:
                     self.spot_dict[key].add_to_map(folium_map)
 
     def get_spot_by_key(self, key):
-        """Get a traffic spot by its key, loading it if necessary"""
         if key in self.spot_dict:
             return self.spot_dict[key]
 
-        # Try to load it if we don't have it
         self.load_specific_traffic_spots([key])
-
-        # Return if found, None otherwise
         return self.spot_dict.get(key)

app.py

@@ -4,8 +4,20 @@ import streamlit as st
 from html import escape
 from streamlit_folium import st_folium, folium_static
 import math
-from AirbnbMapVisualiser import AirbnbMapVisualiser
+from HKUSTBNBVisualiser import HKUSTBNBVisualiser
 from huggingface_hub import login
+from HKUSTBNBConstant import (
+    SIDEBAR_HEADER,
+    SIDEBAR_DIVIDER,
+    TRAFFIC_EXPLANATION,
+    SEARCH_EXPLANATION,
+    REVIEW_CARD_TEMPLATE,
+    LISTINGS_COUNT_INFO,
+    LISTING_CARD_TEMPLATE,
+    PRICE_DISPLAY_WITH_DISCOUNT,
+    PRICE_DISPLAY_NORMAL,
+    RELEVANCE_INFO_LISTING
+)
 
 
 def load_css(css_file):
@@ -14,7 +26,6 @@ def load_css(css_file):
 
 
 def highlight_search_terms(text, search_query):
-    """Highlight search terms in text"""
     if not search_query:
         return text
 
@@ -23,7 +34,6 @@ def highlight_search_terms(text, search_query):
 
     for term in search_terms:
         if term.strip():
-            # Case-insensitive replacement with word boundaries
             pattern = f'(?i)\\b{term}\\b'
             replacement = f'<span class="highlight">{term}</span>'
             highlighted_text = re.sub(pattern, replacement, highlighted_text)
@@ -44,28 +54,24 @@ def render_review_dialog():
                 try:
                     review_date, reviewer_name, comments = review
 
-                    # Highlight search terms in comments if search query exists
                     highlighted_comments = highlight_search_terms(
                         str(comments),
                         st.session_state.search_query
                     )
 
-                    st.markdown(f"""
-                        <div class="review-card">
-                            <div class="review-header">
-                                {escape(str(reviewer_name))} - {escape(str(review_date))}
-                            </div>
-                            <div class="review-content">
-                                {highlighted_comments}
-                            </div>
-                        </div>
-                    """, unsafe_allow_html=True)
+                    st.markdown(
+                        REVIEW_CARD_TEMPLATE.format(
+                            reviewer_name=escape(str(reviewer_name)),
+                            review_date=escape(str(review_date)),
+                            highlighted_comments=highlighted_comments
+                        ),
+                        unsafe_allow_html=True
+                    )
                 except Exception as e:
                     st.error(f"Error displaying review: {str(e)}")
         else:
             st.info("No reviews available for this listing.")
 
-
 def main():
     st.set_page_config(
         layout="wide",
@@ -73,8 +79,6 @@ def main():
         initial_sidebar_state="expanded"
     )
     load_css('style.css')
-
-    # Initialize session state
     if 'center_lat' not in st.session_state:
         st.session_state.center_lat = None
     if 'center_lng' not in st.session_state:
@@ -102,142 +106,77 @@ def main():
     if 'show_search_explanation' not in st.session_state:
         st.session_state.show_search_explanation = False
     if 'listings_limit' not in st.session_state:
-        st.session_state.listings_limit = 10  # Default to 10 listings
-
-    # Initialize visualizer with loading message for tokenizer
+        st.session_state.listings_limit = 10
     if 'visualizer' not in st.session_state:
         with st.spinner('Loading HKUST BNB+ ...'):
-            st.session_state.visualizer = AirbnbMapVisualiser()
+            st.session_state.visualizer = HKUSTBNBVisualiser()
             st.session_state.tokenizer_loaded = True
-
     visualizer = st.session_state.visualizer
-
-    # Check if visualizer is properly initialized
     if visualizer is None or not hasattr(visualizer, 'neighborhoods'):
         st.error("Error initializing the application. Please refresh the page.")
         return
-
-    # Show explanations if requested
     if st.session_state.show_traffic_explanation:
         with st.expander("📊 Traffic-Based Discount System", expanded=True):
-            st.markdown("""
-                ### How HKUST BNB+ Acheived (E)SG , use Traffic Spot from Department of Transport and do traffic analysis hence provided discount according 
-                to the average traffic on the previous days.
-
-                We use real-time traffic data to offer you the best possible rates:
-
-                * **Blue Camera Icons**: Areas with very low traffic (less than 2 vehicles detected)
-                  * Enjoy a peaceful stay with **20% DISCOUNT** on these properties!
-
-                * **Orange Camera Icons**: Areas with moderate traffic (2-5 vehicles detected)
-                  * Get a **10% DISCOUNT** on these properties!
-
-                * **Purple Camera Icons**: Areas with heavier traffic (more than 5 vehicles)
-                  * Standard rates apply for these properties
-
-                Look for the blue connecting lines on the map to see which traffic spot affects each property!
-
-                Remark : Currently only few traffic spot avaliable, in the future will provide more.
-            """)
+            st.markdown(TRAFFIC_EXPLANATION)
             if st.button("Close", key="close_traffic_btn"):
                 st.session_state.show_traffic_explanation = False
                 st.rerun()
-
     if st.session_state.show_search_explanation:
         with st.expander("🔍 Smart Search System", expanded=True):
-            st.markdown("""
-                ### How HKUST BNB+ Acheived E(S)G , use keyword to provided semantic relevance analysis to matches the require need from HKUST Student
-
-                Our advanced search technology goes beyond simple keyword matching to understand the meaning behind your search terms:
-
-                When you search for terms like "quiet," "convenient," or "spacious," our system:
-                1. Analyzes both listing titles and actual guest reviews
-                2. Understands the context and meaning (not just matching exact words)
-                3. Ranks listings based on overall relevance to your search
-
-                **Search Match Types:**
-                * **"Strong match in title and reviews"** - Perfect matches in both property description and guest experiences
-                * **"Strong match in listing title"** - Property description matches your needs very well
-                * **"Strong match in reviews"** - Guest experiences align perfectly with what you're looking for
-                * **"Better match in listing title/reviews"** - One source is more relevant than the other
-                * **"Moderate semantic match"** - Some relevance but not a perfect match
-
-                This helps you find properties that truly match what you're looking for, even if they don't use the exact words in your search!
-            """)
+            st.markdown(SEARCH_EXPLANATION)
             if st.button("Close", key="close_search_btn"):
                 st.session_state.show_search_explanation = False
                 st.rerun()
-
     with st.sidebar:
-        st.markdown(
-            '<p class="sidebar-header">HKUST BNB+<BR/></p>',
-            unsafe_allow_html=True)
-
+        st.markdown(SIDEBAR_HEADER, unsafe_allow_html=True)
         search_query = st.text_input(
             "🔍 Search listings",
             value=st.session_state.search_query,
             placeholder="Try: 'cozy , quiet '"
         )
-
         if search_query != st.session_state.search_query:
             st.session_state.search_query = search_query
             st.session_state.current_page = 1
             st.session_state.show_review_dialog = False
-
-        st.markdown('<hr style="margin: 20px 0; border: none; border-top: 1px solid #e0e0e0;">', unsafe_allow_html=True)
-
+        st.markdown(SIDEBAR_DIVIDER, unsafe_allow_html=True)
         neighborhood = st.selectbox(
             "Select Neighborhood",
             options=visualizer.neighborhoods,
             index=visualizer.neighborhoods.index("Kowloon City") if "Kowloon City" in visualizer.neighborhoods else 0
         )
-
-        # Add dropdown for selecting number of listings to show
         listings_limit = st.selectbox(
             "Number of listings to show",
             options=[10, 20, 30, 40, 50],
-            index=0,  # Default to 10
+            index=0,
             help="Select how many listings to display for this neighborhood"
         )
-
-        # Update session state if listings_limit has changed
         if listings_limit != st.session_state.listings_limit:
             st.session_state.listings_limit = listings_limit
-            # Reset to page 1 when changing the number of listings
             st.session_state.current_page = 1
             st.session_state.show_review_dialog = False
-
         show_traffic = st.checkbox("Show Traffic Cameras", value=True)
-
-        st.markdown('<hr style="margin: 20px 0; border: none; border-top: 1px solid #e0e0e0;">', unsafe_allow_html=True)
-
-        # Help section in sidebar
+        st.markdown(SIDEBAR_DIVIDER, unsafe_allow_html=True)
         st.markdown("### 💡 Help & Information")
-
         col1, col2 = st.columns(2)
         with col1:
             if st.button("Green Discount", key="traffic_info_btn"):
                 st.session_state.show_traffic_explanation = True
                 st.rerun()
-
         with col2:
             if st.button("Semantic Search", key="search_info_btn"):
                 st.session_state.show_search_explanation = True
                 st.rerun()
-
         if st.button("Reset All", key="reset_btn"):
             st.session_state.center_lat = None
             st.session_state.center_lng = None
             st.session_state.selected_id = None
             st.session_state.current_page = 1
             st.session_state.search_query = ""
-            st.session_state.listings_limit = 10  # Reset to default
+            st.session_state.listings_limit = 10
             st.session_state.show_review_dialog = False
             st.session_state.show_traffic_explanation = False
             st.session_state.show_search_explanation = False
             st.rerun()
-
-    # Create map and get data - pass current page information and listings limit
     m, df = visualizer.create_map_and_data(
         neighborhood,
         show_traffic,
@@ -249,8 +188,6 @@ def main():
         st.session_state.items_per_page,
         st.session_state.listings_limit
     )
-
-    # Handle neighborhood change
     if st.session_state.previous_neighborhood != neighborhood:
         st.session_state.current_page = 1
         if not df.empty:
@@ -260,87 +197,71 @@ def main():
         st.session_state.previous_neighborhood = neighborhood
         st.session_state.show_review_dialog = False
         st.rerun()
-
     if m is None:
         st.error("No data available for the selected neighborhood")
         return
-
     col1, col2 = st.columns([7, 3])
-
     with col1:
         st.markdown('<div class="map-container">', unsafe_allow_html=True)
         st_folium(m, width=None, height=700)
         st.markdown('</div>', unsafe_allow_html=True)
-
     with col2:
-        # Display info about how many listings are being shown
         st.markdown(
-            f"<p style='text-align:center; color:#4285f4;'>Showing {st.session_state.listings_limit} listings in {neighborhood}</p>",
-            unsafe_allow_html=True)
-
+            LISTINGS_COUNT_INFO.format(
+                listings_limit=st.session_state.listings_limit,
+                neighborhood=neighborhood
+            ),
+            unsafe_allow_html=True
+        )
         total_items = len(df)
         total_pages = math.ceil(total_items / st.session_state.items_per_page)
         st.session_state.current_page = min(max(1, st.session_state.current_page), total_pages)
         start_idx = (st.session_state.current_page - 1) * st.session_state.items_per_page
         end_idx = min(start_idx + st.session_state.items_per_page, total_items)
-
         st.markdown('<div class="scrollable-container">', unsafe_allow_html=True)
-
         for idx in range(start_idx, end_idx):
             row = df.iloc[idx]
             background_color = "#E3F2FD" if st.session_state.selected_id == row['id'] else "white"
-
-            # Calculate discount based on nearest traffic spot
             discounted_price = row['price']
             discount_tag = ""
-
-            # Find nearest traffic spot for this listing
             listing_lat = row['latitude']
             listing_lng = row['longitude']
-
-            # Use the visualizer's method to find the nearest traffic spot
             nearest_spot, distance = visualizer.find_nearest_traffic_spot(listing_lat, listing_lng)
-
-            # Apply discount if there's a nearest spot
             if nearest_spot:
                 discount_rate = nearest_spot.get_discount_rate()
                 if discount_rate > 0:
                     discounted_price = row['price'] * (1 - discount_rate)
                     discount_percentage = int(discount_rate * 100)
                     discount_tag = f"""<span class="discount-tag">-{discount_percentage}%</span>"""
-
-            # Price display logic
             if discount_tag:
-                price_display = f"""<p class="listing-info">💰 <span class="original-price">${row['price']:.0f}</span> <span class="discounted-price">${discounted_price:.0f}</span> {discount_tag}</p>"""
+                price_display = PRICE_DISPLAY_WITH_DISCOUNT.format(
+                    original_price=row['price'],
+                    discounted_price=discounted_price,
+                    discount_tag=discount_tag
+                )
             else:
-                price_display = f"""<p class="listing-info">💰 ${row['price']:.0f}</p>"""
-
+                price_display = PRICE_DISPLAY_NORMAL.format(price=row['price'])
             relevance_info = ""
             if st.session_state.search_query and 'relevance_percentage' in row:
-                relevance_info = f"""<p class="listing-info"> 🎯 Relevance: {row['relevance_percentage']:.0f}% </p>"""
-                if 'matching_features' in row:
-                    matching_features = row['matching_features']
-                    if matching_features and matching_features != "No direct matches":
-                        relevance_info += f"""<p class="listing-info">✨ Matching: {escape(str(matching_features))}</p>"""
-
-            st.markdown(f"""
-                <div class="listing-card" style="background-color: {background_color}">
-                    <h4 class="listing-title">{escape(str(row['name']))}</h4>
-                    {price_display}
-                    <p class="listing-info">🏠 {escape(str(row['room_type']))}</p>
-                    <p class="listing-info">⭐ Reviews: {row['number_of_reviews']:.0f}</p>
-                    {relevance_info}</div>
-            """, unsafe_allow_html=True)
-
+                relevance_info = RELEVANCE_INFO_LISTING.format(relevance_percentage=row['relevance_percentage'])
+            st.markdown(
+                LISTING_CARD_TEMPLATE.format(
+                    background_color=background_color,
+                    listing_name=escape(str(row['name'])),
+                    price_display=price_display,
+                    room_type=escape(str(row['room_type'])),
+                    review_count=row['number_of_reviews'],
+                    relevance_info=relevance_info
+                ),
+                unsafe_allow_html=True
+            )
             col_details, col_reviews = st.columns(2)
-
             with col_details:
                 if st.button("View Details", key=f"btn_{row['id']}"):
                     st.session_state.selected_id = row['id']
                     st.session_state.center_lat = row['latitude']
                     st.session_state.center_lng = row['longitude']
                     st.rerun()
-
             with col_reviews:
                 if st.button("View Reviews", key=f"review_btn_{row['id']}"):
                     st.session_state.show_review_dialog = True
@@ -348,12 +269,8 @@ def main():
                     st.session_state.current_review_listing_name = row['name']
                     st.session_state.scroll_to_review = True
                     st.rerun()
-
         st.markdown('</div>', unsafe_allow_html=True)
-
-        # Pagination controls
         col_prev, col_select, col_next = st.columns([1, 1, 1])
-
         with col_select:
             page_options = list(range(1, total_pages + 1))
             new_page = st.selectbox(
@@ -363,7 +280,6 @@ def main():
                 key="page_selector",
                 label_visibility="collapsed"
             )
-
             if new_page != st.session_state.current_page:
                 st.session_state.current_page = new_page
                 new_start_idx = (new_page - 1) * st.session_state.items_per_page
@@ -373,7 +289,6 @@ def main():
                     st.session_state.center_lng = df.iloc[new_start_idx]['longitude']
                 st.session_state.show_review_dialog = False
                 st.rerun()
-
         with col_prev:
             if st.button("← Previous", disabled=st.session_state.current_page <= 1):
                 st.session_state.current_page -= 1
@@ -384,7 +299,6 @@ def main():
                     st.session_state.center_lng = df.iloc[new_start_idx]['longitude']
                 st.session_state.show_review_dialog = False
                 st.rerun()
-
         with col_next:
             if st.button("Next →", disabled=st.session_state.current_page >= total_pages):
                 st.session_state.current_page += 1
@@ -395,8 +309,6 @@ def main():
                     st.session_state.center_lng = df.iloc[new_start_idx]['longitude']
                 st.session_state.show_review_dialog = False
                 st.rerun()
-
-    # Show review dialog if active
     if st.session_state.show_review_dialog:
         render_review_dialog()
 
@@ -405,6 +317,4 @@ if __name__ == "__main__":
     token = os.environ.get("HF_TOKEN")
     if token:
         login(token=token)
-        main()
-    else:
-        main()
+    main()