[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import HousePricePrediction from "@/components/house-price-prediction" export default function Home() { return (

House Price Prediction

) } [V0_FILE]typescriptreact:file="components/floor-plan-visualization.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import type { HouseData } from "./house-price-prediction" interface FloorPlanVisualizationProps { roomSizes: HouseData["roomSizes"] floorPlanType: string } export default function FloorPlanVisualization({ roomSizes, floorPlanType }: FloorPlanVisualizationProps) { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Calculate total area const totalArea = roomSizes.livingRoom + roomSizes.kitchen + roomSizes.masterBedroom + roomSizes.otherBedrooms.reduce((sum, size) => sum + size, 0) // Scale factor to fit the canvas const scaleFactor = Math.sqrt((canvas.width * canvas.height * 0.8) / totalArea) // Colors const colors = { livingRoom: "#90caf9", kitchen: "#a5d6a7", masterBedroom: "#ffcc80", otherBedrooms: ["#ef9a9a", "#ce93d8", "#9fa8da"], } // Draw rooms based on floor plan type if (floorPlanType === "Open") { drawOpenFloorPlan(ctx, roomSizes, scaleFactor, colors, canvas.width, canvas.height) } else { drawClosedFloorPlan(ctx, roomSizes, scaleFactor, colors, canvas.width, canvas.height) } // Add labels addRoomLabels(ctx, roomSizes, scaleFactor, canvas.width, canvas.height, floorPlanType) }, [roomSizes, floorPlanType]) const drawOpenFloorPlan = ( ctx: CanvasRenderingContext2D, roomSizes: HouseData["roomSizes"], scaleFactor: number, colors: any, canvasWidth: number, canvasHeight: number, ) => { const padding = 20 const currentX = padding let currentY = padding const maxWidth = canvasWidth - padding * 2 // Living room (largest, centered) const livingRoomWidth = Math.sqrt(roomSizes.livingRoom * scaleFactor) * 1.3 const livingRoomHeight = (roomSizes.livingRoom * scaleFactor) / livingRoomWidth const centerX = canvasWidth / 2 - livingRoomWidth / 2 ctx.fillStyle = colors.livingRoom ctx.fillRect(centerX, currentY, livingRoomWidth, livingRoomHeight) ctx.strokeRect(centerX, currentY, livingRoomWidth, livingRoomHeight) currentY += livingRoomHeight + 5 // Kitchen (to the right of living room) const kitchenWidth = Math.sqrt(roomSizes.kitchen * scaleFactor) const kitchenHeight = (roomSizes.kitchen * scaleFactor) / kitchenWidth ctx.fillStyle = colors.kitchen ctx.fillRect(centerX + livingRoomWidth - kitchenWidth, currentY, kitchenWidth, kitchenHeight) ctx.strokeRect(centerX + livingRoomWidth - kitchenWidth, currentY, kitchenWidth, kitchenHeight) // Master bedroom const masterWidth = Math.sqrt(roomSizes.masterBedroom * scaleFactor) * 1.2 const masterHeight = (roomSizes.masterBedroom * scaleFactor) / masterWidth ctx.fillStyle = colors.masterBedroom ctx.fillRect(centerX, currentY, masterWidth, masterHeight) ctx.strokeRect(centerX, currentY, masterWidth, masterHeight) currentY += masterHeight + 5 // Other bedrooms let bedroomX = centerX roomSizes.otherBedrooms.forEach((size, index) => { const bedroomWidth = Math.sqrt(size * scaleFactor) * 1.1 const bedroomHeight = (size * scaleFactor) / bedroomWidth ctx.fillStyle = colors.otherBedrooms[index % colors.otherBedrooms.length] ctx.fillRect(bedroomX, currentY, bedroomWidth, bedroomHeight) ctx.strokeRect(bedroomX, currentY, bedroomWidth, bedroomHeight) bedroomX += bedroomWidth + 5 }) } const drawClosedFloorPlan = ( ctx: CanvasRenderingContext2D, roomSizes: HouseData["roomSizes"], scaleFactor: number, colors: any, canvasWidth: number, canvasHeight: number, ) => { const padding = 20 const maxWidth = canvasWidth - padding * 2 const maxHeight = canvasHeight - padding * 2 // Calculate dimensions for a more structured layout const totalWidth = Math.sqrt((roomSizes.livingRoom + roomSizes.kitchen + roomSizes.masterBedroom) * scaleFactor) * 1.5 const livingRoomWidth = totalWidth * 0.6 const livingRoomHeight = (roomSizes.livingRoom * scaleFactor) / livingRoomWidth const kitchenWidth = totalWidth * 0.4 const kitchenHeight = (roomSizes.kitchen * scaleFactor) / kitchenWidth const masterWidth = totalWidth * 0.5 const masterHeight = (roomSizes.masterBedroom * scaleFactor) / masterWidth // Position everything const startX = (canvasWidth - totalWidth) / 2 let currentY = padding // Draw outer walls ctx.strokeStyle = "#000" ctx.lineWidth = 2 ctx.strokeRect(startX, currentY, totalWidth, livingRoomHeight + kitchenHeight + masterHeight + 10) ctx.lineWidth = 1 // Living room ctx.fillStyle = colors.livingRoom ctx.fillRect(startX, currentY, livingRoomWidth, livingRoomHeight) ctx.strokeRect(startX, currentY, livingRoomWidth, livingRoomHeight) // Kitchen ctx.fillStyle = colors.kitchen ctx.fillRect(startX + livingRoomWidth, currentY, kitchenWidth, kitchenHeight) ctx.strokeRect(startX + livingRoomWidth, currentY, kitchenWidth, kitchenHeight) currentY += livingRoomHeight // Master bedroom ctx.fillStyle = colors.masterBedroom ctx.fillRect(startX, currentY, masterWidth, masterHeight) ctx.strokeRect(startX, currentY, masterWidth, masterHeight) // Other bedrooms let bedroomX = startX + masterWidth const remainingWidth = totalWidth - masterWidth roomSizes.otherBedrooms.forEach((size, index) => { const bedroomWidth = remainingWidth / roomSizes.otherBedrooms.length const bedroomHeight = masterHeight ctx.fillStyle = colors.otherBedrooms[index % colors.otherBedrooms.length] ctx.fillRect(bedroomX, currentY, bedroomWidth, bedroomHeight) ctx.strokeRect(bedroomX, currentY, bedroomWidth, bedroomHeight) bedroomX += bedroomWidth }) // Draw doors drawDoors( ctx, startX, padding, livingRoomWidth, livingRoomHeight, kitchenWidth, kitchenHeight, masterWidth, masterHeight, ) } const drawDoors = ( ctx: CanvasRenderingContext2D, startX: number, startY: number, livingRoomWidth: number, livingRoomHeight: number, kitchenWidth: number, kitchenHeight: number, masterWidth: number, masterHeight: number, ) => { // Door between living room and kitchen const doorWidth = 15 ctx.strokeStyle = "#fff" ctx.lineWidth = 2 ctx.beginPath() ctx.moveTo(startX + livingRoomWidth, startY + kitchenHeight / 2 - doorWidth / 2) ctx.lineTo(startX + livingRoomWidth, startY + kitchenHeight / 2 + doorWidth / 2) ctx.stroke() // Door to master bedroom ctx.beginPath() ctx.moveTo(startX + masterWidth / 2 - doorWidth / 2, startY + livingRoomHeight) ctx.lineTo(startX + masterWidth / 2 + doorWidth / 2, startY + livingRoomHeight) ctx.stroke() ctx.lineWidth = 1 ctx.strokeStyle = "#000" } const addRoomLabels = ( ctx: CanvasRenderingContext2D, roomSizes: HouseData["roomSizes"], scaleFactor: number, canvasWidth: number, canvasHeight: number, floorPlanType: string, ) => { ctx.fillStyle = "#000" ctx.font = "10px Arial" ctx.textAlign = "center" const padding = 20 const centerX = canvasWidth / 2 if (floorPlanType === "Open") { const livingRoomWidth = Math.sqrt(roomSizes.livingRoom * scaleFactor) * 1.3 const livingRoomHeight = (roomSizes.livingRoom * scaleFactor) / livingRoomWidth // Living room label ctx.fillText("Living Room", centerX, padding + livingRoomHeight / 2) // Kitchen label const kitchenWidth = Math.sqrt(roomSizes.kitchen * scaleFactor) ctx.fillText("Kitchen", centerX + livingRoomWidth - kitchenWidth / 2, padding + livingRoomHeight + 20) // Master bedroom label const masterWidth = Math.sqrt(roomSizes.masterBedroom * scaleFactor) * 1.2 ctx.fillText("Master Bedroom", centerX + masterWidth / 2, padding + livingRoomHeight + 20) } else { const totalWidth = Math.sqrt((roomSizes.livingRoom + roomSizes.kitchen + roomSizes.masterBedroom) * scaleFactor) * 1.5 const livingRoomWidth = totalWidth * 0.6 const livingRoomHeight = (roomSizes.livingRoom * scaleFactor) / livingRoomWidth const kitchenWidth = totalWidth * 0.4 const startX = (canvasWidth - totalWidth) / 2 // Living room label ctx.fillText("Living Room", startX + livingRoomWidth / 2, padding + livingRoomHeight / 2) // Kitchen label ctx.fillText("Kitchen", startX + livingRoomWidth + kitchenWidth / 2, padding + livingRoomHeight / 2) // Master bedroom label const masterWidth = totalWidth * 0.5 ctx.fillText("Master Bedroom", startX + masterWidth / 2, padding + livingRoomHeight + masterWidth / 2) // Other bedrooms let bedroomX = startX + masterWidth const remainingWidth = totalWidth - masterWidth roomSizes.otherBedrooms.forEach((size, index) => { const bedroomWidth = remainingWidth / roomSizes.otherBedrooms.length ctx.fillText(`Bedroom ${index + 2}`, bedroomX + bedroomWidth / 2, padding + livingRoomHeight + masterWidth / 2) bedroomX += bedroomWidth }) } } return (

Interactive Floor Plan

) } [V0_FILE]typescriptreact:file="components/environmental-factors.tsx" isEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import type { HouseData } from "./house-price-prediction" import { TreePine, Waves, Mountain } from "lucide-react" interface EnvironmentalFactorsProps { data: HouseData updateData: (data: Partial) => void } export default function EnvironmentalFactors({ data, updateData }: EnvironmentalFactorsProps) { return (

Environmental Factors

Distance to Parks (miles)

updateData({ distanceToParks: value[0] })} className="flex-1" /> {data.distanceToParks.toFixed(1)}

{data.distanceToParks < 1 ? "Very close to parks - excellent for recreation" : data.distanceToParks < 3 ? "Reasonable distance to parks" : "Parks are further away"}

Distance to Lakes (miles)

updateData({ distanceToLakes: value[0] })} className="flex-1" /> {data.distanceToLakes.toFixed(1)}

{data.distanceToLakes < 2 ? "Very close to lakes - great views and recreation" : data.distanceToLakes < 5 ? "Lakes are within a short drive" : "Lakes are further away"}

Distance to Nature Reserves (miles)

updateData({ distanceToNature: value[0] })} className="flex-1" /> {data.distanceToNature.toFixed(1)}

{data.distanceToNature < 1.5 ? "Very close to nature reserves - peaceful environment" : data.distanceToNature < 5 ? "Nature reserves are within a short drive" : "Nature reserves are further away"}

Environmental Impact

Properties closer to natural amenities like parks, lakes, and nature reserves typically command higher prices due to the quality of life benefits they provide. These include better air quality, recreational opportunities, and aesthetic views.

Parks

Lakes

Nature

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "House Price Prediction", description: "Predict house prices based on various factors", } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/market-factors.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import type { HouseData } from "./house-price-prediction" import { TrendingUp, DollarSign } from "lucide-react" interface MarketFactorsProps { data: HouseData updateData: (data: Partial) => void } export default function MarketFactors({ data, updateData }: MarketFactorsProps) { return (

Market Factors

Historical Price Trend (% annual growth)

updateData({ historicalTrend: value[0] })} className="flex-1" /> {data.historicalTrend.toFixed(1)}%

{data.historicalTrend < 0 ? "Declining market - prices are falling" : data.historicalTrend < 3 ? "Slow growth market" : data.historicalTrend < 7 ? "Healthy growth market" : "Hot market - prices rising quickly"}

Rental Yield (%)

updateData({ rentalYield: value[0] })} className="flex-1" /> {data.rentalYield.toFixed(1)}%

{data.rentalYield < 3 ? "Low yield - typical for premium locations" : data.rentalYield < 5 ? "Average yield - balanced investment" : "High yield - attractive for investors"}

Market Analysis

The selected area has a {data.historicalTrend < 0 ? "negative" : "positive"} price trend of{" "} {Math.abs(data.historicalTrend).toFixed(1)}% annually over the past 5 years. {data.historicalTrend > 5 ? " This indicates strong demand and potential for appreciation." : data.historicalTrend < 0 ? " This suggests a declining market where caution is advised." : " This represents a stable market with moderate growth potential."}

With a rental yield of {data.rentalYield.toFixed(1)}%, this property {data.rentalYield > 5 ? " offers attractive returns for investors." : data.rentalYield < 3 ? " is more suited for long-term appreciation than immediate rental returns." : " provides balanced investment potential between rental income and appreciation."}

) } [V0_FILE]typescriptreact:file="components/house-features.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import type { HouseData } from "./house-price-prediction" import { Bed, Bath, Home, Clock, Car, Lightbulb, Maximize, Leaf } from "lucide-react" interface HouseFeaturesProps { data: HouseData updateData: (data: Partial) => void } export default function HouseFeatures({ data, updateData }: HouseFeaturesProps) { const smartFeatureOptions = [ "Smart Thermostat", "Security System", "Smart Lighting", "Smart Locks", "Voice Assistant", ] const toggleArrayItem = (array: string[], item: string) => { if (array.includes(item)) { return array.filter((i) => i !== item) } else { return [...array, item] } } const updateRoomSize = (room: string, value: number) => { if (room === "livingRoom" || room === "kitchen" || room === "masterBedroom") { updateData({ roomSizes: { ...data.roomSizes, [room]: value, }, }) } else { // Handle other bedrooms const index = Number.parseInt(room.replace("bedroom", "")) - 1 const newOtherBedrooms = [...data.roomSizes.otherBedrooms] newOtherBedrooms[index] = value updateData({ roomSizes: { ...data.roomSizes, otherBedrooms: newOtherBedrooms, }, }) } } return (

House Features

Bedrooms

updateData({ bedrooms: value[0] })} className="flex-1" /> {data.bedrooms}

Bathrooms

updateData({ bathrooms: value[0] })} className="flex-1" /> {data.bathrooms}

Total Square Footage

updateData({ squareFootage: value[0] })} className="flex-1" /> {data.squareFootage}

Room Sizes (sq ft)

Living Room updateRoomSize("livingRoom", Number.parseInt(e.target.value) || 0)} />

Kitchen updateRoomSize("kitchen", Number.parseInt(e.target.value) || 0)} />

Master Bedroom updateRoomSize("masterBedroom", Number.parseInt(e.target.value) || 0)} />

{data.roomSizes.otherBedrooms.map((size, index) => (

Bedroom {index + 2} updateRoomSize(`bedroom${index + 1}`, Number.parseInt(e.target.value) || 0)} />

))}

House Age (years)

updateData({ houseAge: value[0] })} className="flex-1" /> {data.houseAge}

Garage Type

Garage Size (cars)

updateData({ garageSize: value[0] })} className="flex-1" /> {data.garageSize}

Smart Home Features

{smartFeatureOptions.map((feature) => (

updateData({ smartFeatures: toggleArrayItem(data.smartFeatures, feature), }) } /> {feature}

))}

Floor Plan Type

Energy Efficiency Rating

) } [V0_FILE]typescriptreact:file="components/location-selector.tsx" isEdit="true" "use client" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import type { HouseData } from "./house-price-prediction" interface LocationSelectorProps { data: HouseData updateData: (data: Partial) => void } export default function LocationSelector({ data, updateData }: LocationSelectorProps) { const futureDevelopments = ["Shopping Mall", "Metro Station", "Business Park", "Residential Complex"] const landmarks = ["Park", "Hospital", "School", "Temple", "Market"] // Comprehensive list of areas in Hyderabad const hyderabadAreas = [ // Premium Areas { value: "Banjara Hills", tier: "premium" }, { value: "Jubilee Hills", tier: "premium" }, { value: "Film Nagar", tier: "premium" }, { value: "Gachibowli", tier: "premium" }, { value: "Hitech City", tier: "premium" }, { value: "Madhapur", tier: "premium" }, { value: "Financial District", tier: "premium" }, { value: "Kokapet", tier: "premium" }, { value: "Nanakramguda", tier: "premium" }, // Upper Middle Class Areas { value: "Kondapur", tier: "upper-middle" }, { value: "Manikonda", tier: "upper-middle" }, { value: "Khairatabad", tier: "upper-middle" }, { value: "Begumpet", tier: "upper-middle" }, { value: "Somajiguda", tier: "upper-middle" }, { value: "Shaikpet", tier: "upper-middle" }, { value: "Raidurgam", tier: "upper-middle" }, { value: "Miyapur", tier: "upper-middle" }, { value: "Kukatpally", tier: "upper-middle" }, { value: "KPHB", tier: "upper-middle" }, { value: "Chandanagar", tier: "upper-middle" }, { value: "Nallagandla", tier: "upper-middle" }, { value: "Tellapur", tier: "upper-middle" }, { value: "Narsingi", tier: "upper-middle" }, // Middle Class Areas { value: "Ameerpet", tier: "middle" }, { value: "SR Nagar", tier: "middle" }, { value: "Yousufguda", tier: "middle" }, { value: "Secunderabad", tier: "middle" }, { value: "Tarnaka", tier: "middle" }, { value: "Uppal", tier: "middle" }, { value: "Alwal", tier: "middle" }, { value: "Sainikpuri", tier: "middle" }, { value: "Malkajgiri", tier: "middle" }, { value: "Kompally", tier: "middle" }, { value: "Bachupally", tier: "middle" }, { value: "Nizampet", tier: "middle" }, { value: "Pragathi Nagar", tier: "middle" }, { value: "Hafeezpet", tier: "middle" }, { value: "Madinaguda", tier: "middle" }, { value: "Lingampally", tier: "middle" }, { value: "Patancheru", tier: "middle" }, // Affordable Areas { value: "Dilsukhnagar", tier: "affordable" }, { value: "LB Nagar", tier: "affordable" }, { value: "Vanasthalipuram", tier: "affordable" }, { value: "Hayathnagar", tier: "affordable" }, { value: "Nagole", tier: "affordable" }, { value: "Kothapet", tier: "affordable" }, { value: "Malakpet", tier: "affordable" }, { value: "Chaitanyapuri", tier: "affordable" }, { value: "Karmanghat", tier: "affordable" }, { value: "Saroornagar", tier: "affordable" }, { value: "Attapur", tier: "affordable" }, { value: "Mehdipatnam", tier: "affordable" }, { value: "Tolichowki", tier: "affordable" }, { value: "Shaikpet", tier: "affordable" }, { value: "Beeramguda", tier: "affordable" }, { value: "Ramachandrapuram", tier: "affordable" }, { value: "Bowenpally", tier: "affordable" }, { value: "Balanagar", tier: "affordable" }, { value: "Jeedimetla", tier: "affordable" }, { value: "Quthbullapur", tier: "affordable" }, { value: "Chintal", tier: "affordable" }, ] const toggleArrayItem = (array: string[], item: string) => { if (array.includes(item)) { return array.filter((i) => i !== item) } else { return [...array, item] } } return (

Location Details

City

State

Area

Proximity to Public Transport (km)

updateData({ proximityToTransport: value[0] })} className="flex-1" /> {data.proximityToTransport.toFixed(1)}

Schools Nearby (count)

updateData({ schoolsNearby: value[0] })} className="flex-1" /> {data.schoolsNearby}

Traffic Density

Future Developments Nearby

{futureDevelopments.map((dev) => (

updateData({ futureDevelopments: toggleArrayItem(data.futureDevelopments, dev), }) } /> {dev}

))}

Local Landmarks

{landmarks.map((landmark) => (

updateData({ landmarks: toggleArrayItem(data.landmarks, landmark), }) } /> {landmark}

))}

) } [V0_FILE]typescriptreact:file="components/house-price-prediction.tsx" isEdit="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import LocationSelector from "@/components/location-selector" import HouseFeatures from "@/components/house-features" import EnvironmentalFactors from "@/components/environmental-factors" import MarketFactors from "@/components/market-factors" import PredictionResults from "@/components/prediction-results" import { Button } from "@/components/ui/button" import { Loader2 } from "lucide-react" export type HouseData = { // Location data city: string state: string area: string proximityToTransport: number schoolsNearby: number trafficDensity: string futureDevelopments: string[] landmarks: string[] // House features bedrooms: number bathrooms: number squareFootage: number roomSizes: { livingRoom: number kitchen: number masterBedroom: number otherBedrooms: number[] } houseAge: number garageType: string garageSize: number smartFeatures: string[] floorPlanType: string energyRating: string // Environmental factors distanceToParks: number distanceToLakes: number distanceToNature: number // Market factors historicalTrend: number rentalYield: number } const defaultHouseData: HouseData = { city: "Hyderabad", state: "Telangana", area: "Banjara Hills", proximityToTransport: 0.5, schoolsNearby: 3, trafficDensity: "Medium", futureDevelopments: ["Shopping Mall"], landmarks: ["Park", "Hospital"], bedrooms: 3, bathrooms: 2, squareFootage: 1800, roomSizes: { livingRoom: 300, kitchen: 150, masterBedroom: 200, otherBedrooms: [150, 120], }, houseAge: 15, garageType: "Attached", garageSize: 2, smartFeatures: ["Smart Thermostat", "Security System"], floorPlanType: "Open", energyRating: "B", distanceToParks: 0.8, distanceToLakes: 5.2, distanceToNature: 1.5, historicalTrend: 5.2, rentalYield: 4.8, } export default function HousePricePrediction() { const [activeTab, setActiveTab] = useState("location") const [houseData, setHouseData] = useState(defaultHouseData) const [predictedPrice, setPredictedPrice] = useState(null) const [isCalculating, setIsCalculating] = useState(false) const [showResults, setShowResults] = useState(false) const updateHouseData = (data: Partial) => { setHouseData((prev) => ({ ...prev, ...data })) } const handlePredictPrice = () => { setIsCalculating(true) // Simulate API call for prediction setTimeout(() => { // This is a simplified prediction model // In a real app, this would be a call to a backend ML model const basePrice = 8000000 // Base price in INR (80 lakhs) // Area-based multiplier let areaMultiplier = 1.0 // Premium areas if ( [ "Banjara Hills", "Jubilee Hills", "Film Nagar", "Gachibowli", "Hitech City", "Madhapur", "Financial District", "Kokapet", "Nanakramguda", ].includes(houseData.area) ) { areaMultiplier = 2.0 } // Upper middle class areas else if ( [ "Kondapur", "Manikonda", "Khairatabad", "Begumpet", "Somajiguda", "Shaikpet", "Raidurgam", "Miyapur", "Kukatpally", "KPHB", "Chandanagar", "Nallagandla", "Tellapur", "Narsingi", ].includes(houseData.area) ) { areaMultiplier = 1.5 } // Middle class areas else if ( [ "Ameerpet", "SR Nagar", "Yousufguda", "Secunderabad", "Tarnaka", "Uppal", "Alwal", "Sainikpuri", "Malkajgiri", "Kompally", "Bachupally", "Nizampet", "Pragathi Nagar", "Hafeezpet", "Madinaguda", "Lingampally", "Patancheru", ].includes(houseData.area) ) { areaMultiplier = 1.0 } // Affordable areas else { areaMultiplier = 0.7 } // Location factors (30% impact) const locationMultiplier = areaMultiplier * (houseData.proximityToTransport < 1 ? 1.2 : 1) * (houseData.schoolsNearby > 2 ? 1.15 : 1) * (houseData.trafficDensity === "Low" ? 1.1 : houseData.trafficDensity === "High" ? 0.9 : 1) * (houseData.futureDevelopments.length > 0 ? 1.1 : 1) * (houseData.landmarks.length > 1 ? 1.05 : 1) // House features (40% impact) const houseMultiplier = (1 + (houseData.bedrooms - 3) * 0.1) * (1 + (houseData.bathrooms - 2) * 0.05) * (houseData.squareFootage / 1500) * (houseData.houseAge < 10 ? 1.2 : houseData.houseAge > 30 ? 0.8 : 1) * (houseData.garageSize > 0 ? 1.1 : 1) * (houseData.smartFeatures.length > 2 ? 1.1 : 1) * (houseData.floorPlanType === "Open" ? 1.05 : 1) * (houseData.energyRating === "A" ? 1.1 : houseData.energyRating === "F" ? 0.9 : 1) // Environmental factors (15% impact) const envMultiplier = (houseData.distanceToParks < 1 ? 1.1 : 1) * (houseData.distanceToLakes < 2 ? 1.15 : 1) * (houseData.distanceToNature < 1 ? 1.05 : 1) // Market factors (15% impact) const marketMultiplier = (1 + houseData.historicalTrend / 100) * (1 + houseData.rentalYield / 100) const calculatedPrice = basePrice * locationMultiplier * houseMultiplier * envMultiplier * marketMultiplier setPredictedPrice(Math.round(calculatedPrice)) setIsCalculating(false) setShowResults(true) }, 2000) } const nextTab = () => { if (activeTab === "location") setActiveTab("house") else if (activeTab === "house") setActiveTab("environment") else if (activeTab === "environment") setActiveTab("market") else if (activeTab === "market") handlePredictPrice() } const prevTab = () => { if (activeTab === "house") setActiveTab("location") else if (activeTab === "environment") setActiveTab("house") else if (activeTab === "market") setActiveTab("environment") else if (showResults) setActiveTab("market") } return (

{!showResults ? ( Location House Features Environment Market

) : (

{isCalculating ? (

Calculating house price...

) : (

)}

) } [V0_FILE]typescriptreact:file="components/prediction-results.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { HouseData } from "./house-price-prediction" import { Home, MapPin, TreePine, TrendingUp, BarChart3, Waves, Mountain } from "lucide-react" import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts" import FloorPlanVisualization from "./floor-plan-visualization" interface PredictionResultsProps { houseData: HouseData predictedPrice: number } export default function PredictionResults({ houseData, predictedPrice }: PredictionResultsProps) { const [activeTab, setActiveTab] = useState("summary") // Format price in Indian format (lakhs and crores) const formatIndianPrice = (price: number) => { if (price >= 10000000) { // Convert to crores if >= 1 crore const crores = (price / 10000000).toFixed(2) return `₹${crores} Cr` } else if (price >= 100000) { // Convert to lakhs if >= 1 lakh const lakhs = (price / 100000).toFixed(2) return `₹${lakhs} Lakhs` } else { // Format with commas for thousands return `₹${price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}` } } // Calculate impact factors const calculateImpactFactors = () => { // This is a simplified model to show relative importance // In a real app, these would come from the ML model // Location factors const locationImpact = 30 const locationScore = (houseData.proximityToTransport < 1 ? 8 : houseData.proximityToTransport < 2 ? 6 : 4) + (houseData.schoolsNearby > 2 ? 8 : houseData.schoolsNearby > 0 ? 5 : 3) + (houseData.trafficDensity === "Low" ? 8 : houseData.trafficDensity === "Medium" ? 6 : 4) + (houseData.futureDevelopments.length > 1 ? 7 : houseData.futureDevelopments.length > 0 ? 5 : 3) + (houseData.landmarks.length > 2 ? 8 : houseData.landmarks.length > 0 ? 5 : 3) const locationPercentage = (locationScore / 40) * locationImpact // House features const houseImpact = 40 const houseScore = (houseData.bedrooms > 3 ? 8 : houseData.bedrooms > 2 ? 6 : 4) + (houseData.bathrooms > 2 ? 8 : houseData.bathrooms > 1 ? 6 : 4) + (houseData.squareFootage > 2000 ? 9 : houseData.squareFootage > 1500 ? 7 : 5) + (houseData.houseAge < 10 ? 8 : houseData.houseAge < 30 ? 6 : 4) + (houseData.garageSize > 1 ? 7 : houseData.garageSize > 0 ? 5 : 3) + (houseData.smartFeatures.length > 2 ? 8 : houseData.smartFeatures.length > 0 ? 5 : 3) + (houseData.floorPlanType === "Open" ? 7 : 5) + (houseData.energyRating === "A" ? 8 : houseData.energyRating === "B" ? 7 : houseData.energyRating === "C" ? 6 : houseData.energyRating === "D" ? 5 : houseData.energyRating === "E" ? 4 : 3) const housePercentage = (houseScore / 64) * houseImpact // Environmental factors const envImpact = 15 const envScore = (houseData.distanceToParks < 1 ? 9 : houseData.distanceToParks < 3 ? 6 : 4) + (houseData.distanceToLakes < 2 ? 8 : houseData.distanceToLakes < 5 ? 6 : 4) + (houseData.distanceToNature < 1.5 ? 8 : houseData.distanceToNature < 5 ? 6 : 4) const envPercentage = (envScore / 25) * envImpact // Market factors const marketImpact = 15 const marketScore = (houseData.historicalTrend > 7 ? 9 : houseData.historicalTrend > 3 ? 7 : houseData.historicalTrend > 0 ? 5 : houseData.historicalTrend > -3 ? 3 : 1) + (houseData.rentalYield > 7 ? 9 : houseData.rentalYield > 5 ? 7 : houseData.rentalYield > 3 ? 5 : 3) const marketPercentage = (marketScore / 18) * marketImpact return [ { name: "Location", value: locationPercentage, color: "#8884d8" }, { name: "House Features", value: housePercentage, color: "#82ca9d" }, { name: "Environment", value: envPercentage, color: "#ffc658" }, { name: "Market", value: marketPercentage, color: "#ff8042" }, ] } const impactFactors = calculateImpactFactors() // Key factors that influenced the price const getKeyFactors = () => { const factors = [] // Area factor const premiumAreas = [ "Banjara Hills", "Jubilee Hills", "Film Nagar", "Gachibowli", "Hitech City", "Madhapur", "Financial District", ] const goodAreas = ["Kondapur", "Manikonda", "Khairatabad", "Begumpet", "Somajiguda", "Kukatpally"] if (premiumAreas.includes(houseData.area)) { factors.push(`Premium location in ${houseData.area}`) } else if (goodAreas.includes(houseData.area)) { factors.push(`Desirable location in ${houseData.area}`) } // Location factors if (houseData.proximityToTransport < 1) { factors.push("Excellent proximity to public transport") } if (houseData.schoolsNearby > 2) { factors.push("Multiple schools in the area") } if (houseData.trafficDensity === "Low") { factors.push("Low traffic density") } // House features if (houseData.bedrooms > 3) { factors.push("Above average number of bedrooms") } if (houseData.squareFootage > 2000) { factors.push("Spacious square footage") } if (houseData.houseAge < 10) { factors.push("Newer construction") } if (houseData.smartFeatures.length > 2) { factors.push("Multiple smart home features") } if (houseData.energyRating === "A" || houseData.energyRating === "B") { factors.push("High energy efficiency rating") } // Environmental factors if (houseData.distanceToParks < 1) { factors.push("Very close to parks") } if (houseData.distanceToLakes < 2) { factors.push("Close to lakes") } // Market factors if (houseData.historicalTrend > 5) { factors.push("Strong historical price growth") } if (houseData.rentalYield > 5) { factors.push("Above average rental yield") } return factors.slice(0, 5) // Return top 5 factors } const keyFactors = getKeyFactors() return (

Predicted House Price Based on all provided factors

{formatIndianPrice(predictedPrice)}

Summary Location House Environment Market

Key Price Factors

{factor}

Price Breakdown

`${name} ${(percent * 100).toFixed(0)}%`} > {impactFactors.map((entry, index) => ( ))} [`${value.toFixed(1)}%`, "Impact"]} />

Property Overview

Location

{houseData.area}, {houseData.city}

{houseData.proximityToTransport.toFixed(1)} km to public transport

House Details

{houseData.bedrooms} bed, {houseData.bathrooms} bath, {houseData.squareFootage} sq ft

{houseData.houseAge} years old, {houseData.floorPlanType} floor plan

Environment

{houseData.distanceToParks.toFixed(1)} km to parks

{houseData.distanceToLakes.toFixed(1)} km to lakes

Market

{houseData.historicalTrend.toFixed(1)}% annual price growth

{houseData.rentalYield.toFixed(1)}% rental yield

Location Analysis

Location Details

City: {houseData.city}

Area: {houseData.area}

Proximity Factors

Distance to Public Transport: {houseData.proximityToTransport.toFixed(1)} km

Schools Nearby: {houseData.schoolsNearby}

Traffic Density: {houseData.trafficDensity}

Future Developments

{houseData.futureDevelopments.length > 0 ? (

{dev}

) : (

No future developments planned

)}

Local Landmarks

{houseData.landmarks.length > 0 ? (

{landmark}

) : (

No significant landmarks nearby

)}

Location Impact on Price

{houseData.area === "Banjara Hills" || houseData.area === "Jubilee Hills" || houseData.area === "Hitech City" ? `${houseData.area} is one of the most premium areas in Hyderabad, significantly increasing the property value.` : houseData.area === "Kukatpally" || houseData.area === "Manikonda" || houseData.area === "Kondapur" ? `${houseData.area} is a well-developed residential area with good amenities and connectivity.` : `${houseData.area} offers a balanced mix of affordability and amenities.`}

{houseData.proximityToTransport < 1 && houseData.schoolsNearby > 2 ? "The property's excellent proximity to public transport and multiple schools significantly increases its value." : houseData.proximityToTransport < 2 ? "Good access to public transport is a positive factor for this property's valuation." : "The property's distance from public transport may slightly reduce its market appeal."}

House Features Analysis

Basic Information

Bedrooms: {houseData.bedrooms}

Bathrooms: {houseData.bathrooms}

Total Square Footage: {houseData.squareFootage}

House Age: {houseData.houseAge} years

Additional Features

Garage Type: {houseData.garageType}

Garage Size: {houseData.garageSize} cars

Floor Plan Type: {houseData.floorPlanType}

Energy Rating: {houseData.energyRating}

Smart Home Features

{houseData.smartFeatures.length > 0 ? (

{feature}

) : (

No smart home features

)}

Room Sizes

Living Room

{houseData.roomSizes.livingRoom} sq ft

Kitchen

{houseData.roomSizes.kitchen} sq ft

Master Bedroom

{houseData.roomSizes.masterBedroom} sq ft

{houseData.roomSizes.otherBedrooms.map((size, index) => (

Bedroom {index + 2}

{size} sq ft

))}

House Features Impact on Price

{houseData.bedrooms > 3 && houseData.bathrooms > 2 ? "The above-average number of bedrooms and bathrooms significantly enhances the property's value." : "The property has a standard configuration of bedrooms and bathrooms for its market segment."}

{houseData.houseAge < 10 ? "The newer construction of this property is a strong positive factor in its valuation." : houseData.houseAge > 30 ? "The age of the property may slightly reduce its value compared to newer constructions." : "The property's age is typical for its market segment."}

{houseData.energyRating === "A" || houseData.energyRating === "B" ? "The excellent energy efficiency rating adds significant value to this property." : houseData.energyRating === "E" || houseData.energyRating === "F" ? "The poor energy efficiency rating negatively impacts the property's value." : "The property has an average energy efficiency rating."}

Environmental Factors Analysis

Parks

{houseData.distanceToParks.toFixed(1)} km

{houseData.distanceToParks < 1 ? "Very close - excellent access" : houseData.distanceToParks < 3 ? "Reasonable distance" : "Further away - limited access"}

Lakes

{houseData.distanceToLakes.toFixed(1)} km

{houseData.distanceToLakes < 2 ? "Very close - excellent access" : houseData.distanceToLakes < 5 ? "Reasonable distance" : "Further away - limited access"}

Nature Reserves

{houseData.distanceToNature.toFixed(1)} km

{houseData.distanceToNature < 1.5 ? "Very close - excellent access" : houseData.distanceToNature < 5 ? "Reasonable distance" : "Further away - limited access"}

Environmental Impact on Price

{houseData.distanceToParks < 1 && houseData.distanceToLakes < 2 ? "The property's excellent proximity to both parks and lakes significantly enhances its value and appeal." : houseData.distanceToParks < 1 || houseData.distanceToLakes < 2 ? "The property's good access to natural amenities positively impacts its value." : "The property has average access to natural amenities for its market segment."}

{houseData.distanceToNature < 1.5 ? "The close proximity to nature reserves provides a peaceful environment and adds to the property's value." : "The property has typical access to nature reserves for its location."}

Properties with good access to natural amenities typically command a premium of 5-15% compared to similar properties with limited access.

Market Factors Analysis

Historical Price Trend

{houseData.historicalTrend.toFixed(1)}%

Annual growth rate over past 5 years

{houseData.historicalTrend < 0 ? "Declining market - prices are falling" : houseData.historicalTrend < 3 ? "Slow growth market" : houseData.historicalTrend < 7 ? "Healthy growth market" : "Hot market - prices rising quickly"}

Rental Yield

{houseData.rentalYield.toFixed(1)}%

Expected annual rental return

{houseData.rentalYield < 3 ? "Low yield - typical for premium locations" : houseData.rentalYield < 5 ? "Average yield - balanced investment" : "High yield - attractive for investors"}

Market Impact on Price

{houseData.historicalTrend > 7 ? "The strong historical price growth in this area indicates high demand and suggests potential for continued appreciation." : houseData.historicalTrend < 0 ? "The negative price trend in this area suggests caution, as property values have been declining." : "The area shows typical market growth patterns for its region."}

{houseData.rentalYield > 6 ? "The high rental yield makes this property particularly attractive for investment purposes." : houseData.rentalYield < 3 ? "The low rental yield suggests this property may be better suited for long-term appreciation than immediate rental returns." : "The property offers a balanced investment profile between rental income and potential appreciation."}

{houseData.historicalTrend > 5 && houseData.rentalYield > 5 ? "This property offers an excellent combination of strong historical appreciation and good rental returns, making it a particularly attractive investment." : ""}

) }