-
- );
- }
-
- // Error State UI
- if (!explanationData) {
- return (
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- // Main Content UI
- const { propertyDetails, features, similarProperties, environmentalFactors, confidence, priceRange } =
- explanationData;
-
- return (
- // Assuming ThemeProvider is in the root layout
- // Assuming SidebarProvider and a common sidebar are in root layout or parent layout
- Failed to load model explanation.
- - - -
- {" "}
- {/* Adjusted for page content */}
- {/* Header */}
-
-
- {/* Main content */}
-
- );
-}
-
-// --- Helper Components for Steps ---
-
-function DetailRow({ label, value }: { label: string; value: string | number }) {
- return (
-
-
- Map
-
-
- {/* Add any specific header actions if needed */}
-
- {" "}
- {/* Make content area scrollable */}
-
-
-
-
-
-
- {/* Steps navigation */}
- Explainable Price Prediction Model
-- Understand how our AI model predicts property prices and what factors influence the valuation. -
-
-
-
- {/* Step content */}
-
- {steps.map((step) => (
-
- ))}
-
-
-
-
-
- {/* --- Left Column: Property Details & Interaction --- */}
-
-
- {" "}
- {/* Make left column sticky */}
-
-
- Property Details
- {propertyDetails.address}
-
-
- {/* Dynamically display details */}
-
-
-
-
- Adjust Parameters
- See how changes affect the prediction
-
-
- {/* Size Slider */}
-
-
-
-
-
-
- {/* --- Right Column: Step Content --- */}
-
- setPropertySize(value[0])}
- />
-
- {/* Age Slider */}
-
-
- {propertySize} sqm
-
-
- setPropertyAge(value[0])}
- />
-
-
-
- {propertyAge} years
-
-
-
-
- Adjusted Price
- {formatCurrency(adjustedPrice)}
-
- {/* Show difference */}
- {propertyDetails.predictedPrice !== adjustedPrice && (
-
- {adjustedPrice > propertyDetails.predictedPrice ? "↑" : "↓"}
- {Math.abs(adjustedPrice - propertyDetails.predictedPrice).toLocaleString()} THB from original
-
- )}
-
- {activeStep === 1 &&
-
- {label}
- {value}
-
- );
-}
-
-function formatCurrency(value: number): string {
- return new Intl.NumberFormat("th-TH", {
- style: "currency",
- currency: "THB",
- minimumFractionDigits: 0,
- maximumFractionDigits: 0,
- }).format(value);
-}
-
-// Step 1 Component
-function Step1Content({
- propertyDetails,
- setActiveStep,
-}: {
- propertyDetails: PropertyBaseDetails;
- setActiveStep: (step: number) => void;
-}) {
- return (
-
-
- - Our AI model begins by analyzing the core attributes of your property. These fundamental characteristics - form the baseline for our prediction. -
-
-
-
-
- - Our model analyzes various features and determines how each contributes to the price prediction. Below is a - breakdown of the most important factors. -
-
-
-
- {features.map((feature) => (
-
-
-
- ))}
-
- {feature.name}
-
- {feature.impact === "positive"
- ? "↑ Positive"
- : feature.impact === "negative"
- ? "↓ Negative"
- : "→ Neutral"}
-
-
-
-
- {feature.importance}%
-
- {feature.value}
-
-
- - We analyze recent data from similar properties to establish a baseline. This ensures our prediction aligns - with current market conditions. -
-
-
-
-
- Similar Properties Details
-
- {comparisons.map((p, index) => (
-
-
-
- ))}
-
- {p.address}
-
-
- {p.size} sqm, {p.age} years old
-
- {formatCurrency(p.price)}
-
-
- - Environmental conditions and nearby amenities significantly impact desirability and value. Our model - considers these external factors. -
-
- {/* Environmental Factors */}
-
- {/* Proximity Example */}
-
-
- Proximity to Amenities
-
-
-
- {/* Price Box */}
-
-
-
- {/* Price Range Box */}
- Predicted Price
-{formatCurrency(predictedPrice)}
- Confidence Level: {(confidence * 100).toFixed(0)}%
-
-
-
-
- {/* Summary */}
-
-
- - Based on our model's confidence, the likely market range is: -
-
-
-
-
- Lower Bound
- {formatCurrency(priceRange.lower)}
-
-
- Prediction
- {formatCurrency(predictedPrice)}
-
-
- Upper Bound
- {formatCurrency(priceRange.upper)}
-
-
- Summary of Factors
-This prediction considers:
--
-
- Property characteristics (size, age, layout) -
- Location and neighborhood profile -
- Recent market trends and comparable sales -
- Environmental factors and amenity access -
-
- );
-}
-
-function FactorCard({
- title,
- factor,
- details,
-}: {
- title: string;
- factor: string;
- details: { icon: React.ElementType; color: string; text: string };
-}) {
- const Icon = details.icon;
- const colorClass = `bg-${details.color}-500`; // Requires Tailwind JIT or safelisting
- const textColorClass = `text-${details.color}-500`;
-
- return (
-
-
- {title}
-{description}
-
-
- );
-}
-
-function ProximityItem({ icon: Icon, text }: { icon: React.ElementType; text: string }) {
- return (
- {title}
-
- {/* Explicit colors might be safer than dynamic Tailwind classes */}
-
- {factor}
-
- {details.text}
-
-
- );
-}
-
-function StepFooter({ onPrev, onNext }: { onPrev?: () => void; onNext?: () => void }) {
- return (
- {text}
-
- {" "}
- {/* Ensure content takes up space */}
- {children}
-
- //
- {" "}
- {/* Simplified for page content */}
-
-
-
-
-
-
- {/* Overlay System */}
-
-
-
-
-
-
-
- Price Prediction: 15,000,000 ฿
-Based on our AI model analysis
-
+ {/* Map Container */}
+
+ )
+}
+
diff --git a/frontend/app/(routes)/models/page.tsx b/frontend/app/(routes)/models/page.tsx
new file mode 100644
index 0000000..c02bac7
--- /dev/null
+++ b/frontend/app/(routes)/models/page.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Progress } from "@/components/ui/progress";
+import {
+ BrainCircuit,
+ Clock,
+ Database,
+ Play,
+ Plus,
+ Settings,
+ Sliders,
+ Trash2,
+ AlertTriangle,
+ Check,
+ ArrowRight,
+ Info,
+} from "lucide-react";
+import Link from "next/link";
+import PageHeader from "@/components/page-header";
+
+export default function ModelsPage() {
+ const [activeTab, setActiveTab] = useState("my-models");
+ const [selectedPipeline, setSelectedPipeline] = useState
+ {/* Map Placeholder - In a real implementation, this would be a map component */}
+
+
+ {/* Top Navigation Bar */}
+
+
+
+ {/* Sample Property Markers */}
+ Map View
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Map Controls */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {models.map((model) => (
+ setSelectedModel(model)}
+ className="flex items-center gap-2"
+ >
+ {model === selectedModel &&
+ ))}
+
+
+ Manage Models...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Map Overlay Controls */}
+
+
+
+
+
+
+ {/* Property Info Panel */}
+ {showPropertyInfo && (
+
+
+ )}
+
+ {/* Analytics Panel */}
+ {showAnalytics && (
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Condominium
+
+
+
+ Modern Condominium
+
+
+
+
+
+
+
+
+
+
+
+
+ ฿15,000,000
+
+
+
+
+
+
+ Environmental Factors
+
+
+
+ Moderate
+
+
+ Poor
+
+
+ Low
+
+
+
+
+ Nearby Facilities
+
+
+
+ BTS Phrom Phong
+ 300m
+
+
+ EmQuartier Mall
+ 500m
+
+
+ Benchasiri Park
+ 700m
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Filters Panel */}
+ {showFilters && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Using: {selectedModel}
+
+
+
+ Information in radius will be analyzed
+
+
+ 10,000,000 Baht
+Overall Price History of this area
+ +
+ {/* Simple line chart simulation */}
+
+
+
+
+
+
+
+
+
+
+
+
+ 15,000,000 Baht
+The estimated price based on various factors.
+ +
+ {/* Simple line chart simulation */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Local News Section */}
+
+ Moderate
+
+
+ Bad
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New BTS Extension Planned
++ The BTS Skytrain will be extended to cover more areas in Sukhumvit by 2025. +
+
+
+ Property Tax Changes
++ New property tax regulations will take effect next month affecting luxury condominiums. +
+
+
+
+
+
+
+
+
+
+
+
+ Basic
+ Advanced
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Chat Panel */}
+ {showChat && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setRadius(value[0])}
+ className="flex-1"
+ />
+ {radius} km
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setPriceRange(value)}
+ />
+
+
+
+ ฿{priceRange[0].toLocaleString()}
+ ฿{priceRange[1].toLocaleString()}
+
+
+
+
+
+
+
+ Low Flood Risk
+
+
+
+ Good Air Quality
+
+
+
+ Low Noise Pollution
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Map Legend */}
+
+
+
+
+
+
+
+
+
+ {messages.map((msg, index) => (
+
+
+
+
+ ))}
+
+ {msg.content}
+
+
+
+
+ setMessage(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") handleSendMessage()
+ }}
+ />
+
+
+
+
+ Property Status
+
+
+
+
+ Available
+
+
+
+ Pending
+
+
+
+ Sold
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ My Models
+ System Models
+ Train New Model
+
+
+ {activeTab !== "train-model" && (
+
+ )}
+
+
+
+ {models
+ .filter((model) => !model.isSystem)
+ .map((model) => (
+
+
+ {models.filter((model) => !model.isSystem).length === 0 && (
+ No Custom Models Yet
++ Train your first custom model to get started with personalized property predictions. +
+ +
+ {models
+ .filter((model) => model.isSystem)
+ .map((model) => (
+
+
+
+
+
+ Training Configuration
+ Configure your new model
+
+
+
+
+ setModelName(e.target.value)}
+ />
+
+
+
+
+