Spaces:

muhalwan
/

ml-model-hub

Sleeping

App Files Files Community

muhalwan commited on 26 days ago

Commit

55acd9b

1 Parent(s): 8c20f44

add housing and UI

Browse files

Files changed (5) hide show

app.py +42 -2
index.html +74 -27
requirements.txt +3 -1
static/script.js +76 -53
static/style.css +147 -110

app.py CHANGED Viewed

@@ -4,6 +4,7 @@ os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'
 import logging
 import io
 from pathlib import Path
 from fastapi import FastAPI, File, UploadFile, HTTPException
 from fastapi.staticfiles import StaticFiles
@@ -49,16 +50,38 @@ def load_models():
         cat_dog_model = None
         logging.error(f"Error loading cat & dog model: {e}")
-    return tokenizer, sentiment_model, cat_dog_model
 # --- FastAPI App Initialization ---
 app = FastAPI()
-tokenizer, sentiment_model, cat_dog_model = load_models()
 app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 class SentimentRequest(BaseModel):
     text: str
 # --- API Endpoints ---
 @app.get("/")
 async def read_root():
@@ -101,3 +124,20 @@ async def predict_catdog(file: UploadFile = File(...)):
     except Exception as e:
         logging.error(f"Cat/Dog prediction error: {e}")
         raise HTTPException(status_code=500, detail="An error occurred during image classification.")

 import logging
 import io
+import pickle
 from pathlib import Path
 from fastapi import FastAPI, File, UploadFile, HTTPException
 from fastapi.staticfiles import StaticFiles
         cat_dog_model = None
         logging.error(f"Error loading cat & dog model: {e}")
+    try:
+        xgb_model_path = hf_hub_download(repo_id="muhalwan/california_housing_price_predictor", filename="xgb_model.pkl")
+        with open(xgb_model_path, "rb") as f:
+            housing_model = pickle.load(f)
+        scaler_path = hf_hub_download(repo_id="muhalwan/california_housing_price_predictor", filename="scaler.pkl")
+        with open(scaler_path, "rb") as f:
+            housing_scaler = pickle.load(f)
+        logging.info("Housing price model and scaler loaded successfully.")
+    except Exception as e:
+        housing_model, housing_scaler = None, None
+        logging.error(f"Error loading housing price model: {e}")
+    return tokenizer, sentiment_model, cat_dog_model, housing_model, housing_scaler
 # --- FastAPI App Initialization ---
 app = FastAPI()
+tokenizer, sentiment_model, cat_dog_model, housing_model, housing_scaler = load_models()
 app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 class SentimentRequest(BaseModel):
     text: str
+class HousingRequest(BaseModel):
+    MedInc: float
+    HouseAge: float
+    AveRooms: float
+    AveBedrms: float
+    Population: float
+    AveOccup: float
+    Latitude: float
+    Longitude: float
 # --- API Endpoints ---
 @app.get("/")
 async def read_root():
     except Exception as e:
         logging.error(f"Cat/Dog prediction error: {e}")
         raise HTTPException(status_code=500, detail="An error occurred during image classification.")
+@app.post("/predict/housing")
+async def predict_housing(request: HousingRequest):
+    if not housing_model or not housing_scaler:
+        raise HTTPException(status_code=503, detail="Housing model is not available.")
+    try:
+        input_data = np.array([[
+            request.MedInc, request.HouseAge, request.AveRooms, request.AveBedrms,
+            request.Population, request.AveOccup, request.Latitude, request.Longitude
+        ]])
+        data_scaled = housing_scaler.transform(input_data)
+        raw_prediction = housing_model.predict(data_scaled)[0]
+        final_prediction = raw_prediction * 100000
+        return {"prediction": f"${final_prediction:,.2f}"}
+    except Exception as e:
+        logging.error(f"Housing prediction error: {e}")
+        raise HTTPException(status_code=500, detail="An error occurred during housing price prediction.")

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ML Model Hub</title>
     <link rel="stylesheet" href="/static/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -12,44 +12,91 @@
 <body>
     <div class="container">
         <header>
-            <h1>ML Model Hub</h1>
-            <p>Select a model to get started</p>
         </header>
-        <div class="model-selector">
-            <button id="cat-dog-btn" class="model-btn">Cat & Dog Classifier</button>
             <button id="sentiment-btn" class="model-btn active">Sentiment Analysis</button>
-            <button class="model-btn disabled" disabled>California House Price (soon)</button>
-        </div>
-        <main id="main-content">
-            <!-- Sentiment Analysis Interface -->
-            <div id="sentiment-interface" class="model-interface active">
                 <form id="sentiment-form">
-                    <h2>Tweet Sentiment Analysis</h2>
-                    <p>Enter a tweet to analyze its sentiment (Bullish, Bearish, or Neutral).</p>
-                    <label for="tweet-text">Tweet Text</label>
-                    <textarea id="tweet-text" placeholder="Enter tweet here..."></textarea>
-                    <button type="submit" class="predict-btn">Predict</button>
                 </form>
-                <div id="sentiment-result" class="result-display"></div>
             </div>
-            <!-- Cat & Dog Classifier Interface -->
-            <div id="cat-dog-interface" class="model-interface">
-                <form id="cat-dog-form">
-                    <h2>Cat & Dog Classifier</h2>
-                    <p>Upload an image to classify if it's a cat or a dog.</p>
-                    <label for="image-upload" class="upload-label">Choose an image...</label>
-                    <input type="file" id="image-upload" accept="image/jpeg, image/png">
-                    <div id="image-preview"></div>
-                    <button type="submit" class="predict-btn">Predict</button>
                 </form>
-                <div id="cat-dog-result" class="result-display"></div>
             </div>
         </main>
-    </div>
     <script src="/static/script.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ML Nexus</title>
     <link rel="stylesheet" href="/static/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <body>
     <div class="container">
         <header>
+            <h1>ML Nexus</h1>
+            <p>Your one-stop hub for ML model inference.</p>
         </header>
+        <nav class="model-selector">
             <button id="sentiment-btn" class="model-btn active">Sentiment Analysis</button>
+            <button id="catdog-btn" class="model-btn">Cat & Dog Classifier</button>
+            <button id="housing-btn" class="model-btn">House Price Predictor</button>
+        </nav>
+        <main>
+            <!-- Sentiment Analysis Section -->
+            <div id="sentiment-section" class="model-section active">
+                <h2>Sentiment Analysis <span class="beta-tag">Beta</span></h2>
+                <p>Enter text to classify its sentiment (Bearish or Bullish). This model is in beta, and its accuracy may vary.</p>
                 <form id="sentiment-form">
+                    <textarea id="sentiment-text" name="text" rows="4" placeholder="Enter text here..."></textarea>
+                    <button type="submit">Predict Sentiment</button>
                 </form>
+                <div id="sentiment-result" class="result"></div>
             </div>
+            <!-- Cat & Dog Classifier Section -->
+            <div id="catdog-section" class="model-section">
+                <h2>Cat & Dog Classifier</h2>
+                <p>Upload an image to classify it as a cat or a dog.</p>
+                <form id="catdog-form">
+                    <input type="file" id="catdog-file" name="file" accept="image/*">
+                    <div class="image-preview-container">
+                        <img id="image-preview" src="#" alt="Image Preview" class="image-preview"/>
+                    </div>
+                    <button type="submit">Classify Image</button>
                 </form>
+                <div id="catdog-result" class="result"></div>
+            </div>
+            <!-- California Housing Price Predictor Section -->
+            <div id="housing-section" class="model-section">
+                <h2>California House Price Predictor</h2>
+                <p>Enter the details below to predict the median house value.</p>
+                <form id="housing-form">
+                    <div class="form-grid">
+                        <div class="form-group">
+                            <label for="MedInc">Median Income</label>
+                            <input type="number" step="any" id="MedInc" name="MedInc" placeholder="e.g., 8.3252" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="HouseAge">House Age</label>
+                            <input type="number" step="any" id="HouseAge" name="HouseAge" placeholder="e.g., 41.0" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="AveRooms">Average Rooms</label>
+                            <input type="number" step="any" id="AveRooms" name="AveRooms" placeholder="e.g., 6.9841" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="AveBedrms">Average Bedrooms</label>
+                            <input type="number" step="any" id="AveBedrms" name="AveBedrms" placeholder="e.g., 1.0238" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="Population">Population</label>
+                            <input type="number" step="any" id="Population" name="Population" placeholder="e.g., 322.0" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="AveOccup">Average Occupancy</label>
+                            <input type="number" step="any" id="AveOccup" name="AveOccup" placeholder="e.g., 2.5555" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="Latitude">Latitude</label>
+                            <input type="number" step="any" id="Latitude" name="Latitude" placeholder="e.g., 37.88" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="Longitude">Longitude</label>
+                            <input type="number" step="any" id="Longitude" name="Longitude" placeholder="e.g., -122.23" required>
+                        </div>
+                    </div>
+                    <button type="submit">Predict Price</button>
+                </form>
+                <div id="housing-result" class="result"></div>
             </div>
         </main>
+        <footer>
+            <p>&copy; 2025 ML Nexus. All rights reserved.</p>
+        </footer>
+    </div>
     <script src="/static/script.js"></script>
 </body>
 </html>

requirements.txt CHANGED Viewed

@@ -10,4 +10,6 @@ Pillow
 types-pytz
 fastapi
 uvicorn[standard]
-python-multipart

 types-pytz
 fastapi
 uvicorn[standard]
+python-multipart
+scikit-learn
+xgboost

static/script.js CHANGED Viewed

@@ -1,47 +1,49 @@
 document.addEventListener('DOMContentLoaded', () => {
     const sentimentBtn = document.getElementById('sentiment-btn');
-    const catDogBtn = document.getElementById('cat-dog-btn');
-    const sentimentInterface = document.getElementById('sentiment-interface');
-    const catDogInterface = document.getElementById('cat-dog-interface');
     const sentimentForm = document.getElementById('sentiment-form');
-    const catDogForm = document.getElementById('cat-dog-form');
-    const tweetText = document.getElementById('tweet-text');
-    const imageUpload = document.getElementById('image-upload');
-    const imagePreview = document.getElementById('image-preview');
     const sentimentResult = document.getElementById('sentiment-result');
-    const catDogResult = document.getElementById('cat-dog-result');
-    function switchModelView(activeBtn, activeInterface) {
-        [sentimentBtn, catDogBtn].forEach(btn => btn.classList.remove('active'));
-        activeBtn.classList.add('active');
-        [sentimentInterface, catDogInterface].forEach(intf => intf.classList.remove('active'));
-        activeInterface.classList.add('active');
     }
-    sentimentBtn.addEventListener('click', () => switchModelView(sentimentBtn, sentimentInterface));
-    catDogBtn.addEventListener('click', () => switchModelView(catDogBtn, catDogInterface));
-    imageUpload.addEventListener('change', () => {
-        const file = imageUpload.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                imagePreview.innerHTML = `<img src="${e.target.result}" alt="Image preview">`;
-            };
-            reader.readAsDataURL(file);
-        }
-    });
     sentimentForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const text = tweetText.value.trim();
-        if (!text) return;
-        showResult(sentimentResult, 'Analyzing...', 'loading');
         try {
             const response = await fetch('/predict/sentiment', {
                 method: 'POST',
@@ -49,42 +51,63 @@ document.addEventListener('DOMContentLoaded', () => {
                 body: JSON.stringify({ text })
             });
             const data = await response.json();
-            if (!response.ok) throw new Error(data.detail || 'Prediction failed');
-            showResult(sentimentResult, `Prediction: ${data.prediction}`, 'success');
         } catch (error) {
-            showResult(sentimentResult, `Error: ${error.message}`, 'error');
         }
     });
-    catDogForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const file = imageUpload.files[0];
-        if (!file) return;
-        showResult(catDogResult, 'Classifying...', 'loading');
-        const formData = new FormData();
-        formData.append('file', file);
         try {
             const response = await fetch('/predict/catdog', {
                 method: 'POST',
                 body: formData
             });
             const data = await response.json();
-            if (!response.ok) throw new Error(data.detail || 'Classification failed');
-            showResult(catDogResult, `Prediction: ${data.prediction}`, 'success');
         } catch (error) {
-            showResult(catDogResult, `Error: ${error.message}`, 'error');
         }
     });
-    function showResult(element, message, type) {
-        element.innerHTML = message;
-        element.className = 'result-display';
-        element.classList.add(type);
-        element.style.display = 'block';
-    }
 });

 document.addEventListener('DOMContentLoaded', () => {
+    // Model selection buttons and sections
     const sentimentBtn = document.getElementById('sentiment-btn');
+    const catdogBtn = document.getElementById('catdog-btn');
+    const housingBtn = document.getElementById('housing-btn');
+    const sentimentSection = document.getElementById('sentiment-section');
+    const catdogSection = document.getElementById('catdog-section');
+    const housingSection = document.getElementById('housing-section');
+    const sections = [sentimentSection, catdogSection, housingSection];
+    const buttons = [sentimentBtn, catdogBtn, housingBtn];
+    // Forms and result displays
     const sentimentForm = document.getElementById('sentiment-form');
+    const catdogForm = document.getElementById('catdog-form');
+    const housingForm = document.getElementById('housing-form');
     const sentimentResult = document.getElementById('sentiment-result');
+    const catdogResult = document.getElementById('catdog-result');
+    const housingResult = document.getElementById('housing-result');
+    const imagePreview = document.getElementById('image-preview');
+    const catdogFileInput = document.getElementById('catdog-file');
+    // --- Event Listeners for Model Switching ---
+    function switchTab(activeIndex) {
+        buttons.forEach((button, index) => {
+            button.classList.toggle('active', index === activeIndex);
+        });
+        sections.forEach((section, index) => {
+            section.classList.toggle('active', index === activeIndex);
+        });
     }
+    sentimentBtn.addEventListener('click', () => switchTab(0));
+    catdogBtn.addEventListener('click', () => switchTab(1));
+    housingBtn.addEventListener('click', () => switchTab(2));
+    // --- Form Submission Handlers ---
+    // Sentiment Form
     sentimentForm.addEventListener('submit', async (e) => {
         e.preventDefault();
+        const text = document.getElementById('sentiment-text').value;
+        sentimentResult.textContent = 'Analyzing...';
         try {
             const response = await fetch('/predict/sentiment', {
                 method: 'POST',
                 body: JSON.stringify({ text })
             });
             const data = await response.json();
+            if (!response.ok) throw new Error(data.detail || 'An unknown error occurred.');
+            sentimentResult.textContent = `Prediction: ${data.prediction}`;
         } catch (error) {
+            sentimentResult.textContent = `Error: ${error.message}`;
         }
     });
+    // Cat & Dog Form
+    catdogForm.addEventListener('submit', async (e) => {
         e.preventDefault();
+        const formData = new FormData(catdogForm);
+        catdogResult.textContent = 'Classifying...';
         try {
             const response = await fetch('/predict/catdog', {
                 method: 'POST',
                 body: formData
             });
             const data = await response.json();
+            if (!response.ok) throw new Error(data.detail || 'An unknown error occurred.');
+            catdogResult.textContent = `Prediction: ${data.prediction}`;
+        } catch (error) {
+            catdogResult.textContent = `Error: ${error.message}`;
+        }
+    });
+    // Housing Form
+    housingForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const formData = new FormData(housingForm);
+        const data = Object.fromEntries(formData.entries());
+        housingResult.textContent = 'Predicting...';
+        try {
+            const response = await fetch('/predict/housing', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data)
+            });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.detail || 'An unknown error occurred.');
+            housingResult.textContent = `Predicted Price: ${result.prediction}`;
         } catch (error) {
+            housingResult.textContent = `Error: ${error.message}`;
         }
     });
+    // Image Preview Handler
+    catdogFileInput.addEventListener('change', () => {
+        const file = catdogFileInput.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                imagePreview.src = e.target.result;
+                imagePreview.style.display = 'block';
+            };
+            reader.readAsDataURL(file);
+        } else {
+            imagePreview.style.display = 'none';
+        }
+    });
 });

static/style.css CHANGED Viewed

@@ -1,194 +1,231 @@
 body {
-    font-family: 'Inter', sans-serif;
-    background-color: #f0f2f5;
-    color: #333;
     margin: 0;
-    padding: 20px;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
     min-height: 100vh;
 }
 .container {
     width: 100%;
     max-width: 800px;
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     overflow: hidden;
 }
 header {
     text-align: center;
-    padding: 24px;
-    border-bottom: 1px solid #e8e8e8;
 }
 header h1 {
-    margin: 0 0 8px 0;
-    font-size: 28px;
     font-weight: 700;
-    color: #1a73e8;
 }
 header p {
-    margin: 0;
-    color: #666;
 }
 .model-selector {
     display: flex;
     justify-content: center;
-    gap: 12px;
-    padding: 24px;
-    background-color: #f7f9fc;
 }
 .model-btn {
-    padding: 10px 20px;
-    font-size: 14px;
     font-weight: 600;
-    border: 1px solid #dcdcdc;
-    border-radius: 20px;
-    background-color: #ffffff;
-    color: #555;
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
-}
-.model-btn:hover {
-    background-color: #f1f3f4;
-    border-color: #c0c0c0;
 }
 .model-btn.active {
-    background-color: #1a73e8;
-    color: #ffffff;
-    border-color: #1a73e8;
 }
-.model-btn.disabled {
-    background-color: #f5f5f5;
-    color: #b0b0b0;
-    cursor: not-allowed;
-    border-color: #e0e0e0;
 }
 main {
-    padding: 32px;
 }
-.model-interface {
     display: none;
 }
-.model-interface.active {
     display: block;
 }
-form {
-    background-color: #ffffff;
-    border: 1px solid #e8e8e8;
-    border-radius: 8px;
-    padding: 24px;
-}
-form h2 {
     margin-top: 0;
-    margin-bottom: 8px;
-    font-size: 20px;
 }
-form p {
-    margin-top: 0;
-    margin-bottom: 24px;
-    color: #666;
 }
-label {
-    display: block;
-    font-weight: 600;
-    margin-bottom: 8px;
 }
-textarea, input[type="file"] {
     width: 100%;
-    box-sizing: border-box;
-}
-textarea {
     padding: 12px;
-    border: 1px solid #dcdcdc;
-    border-radius: 6px;
-    font-size: 14px;
-    min-height: 120px;
-    resize: vertical;
 }
-.predict-btn {
-    width: 100%;
-    padding: 12px;
-    font-size: 16px;
-    font-weight: 600;
     border: none;
-    border-radius: 6px;
-    background-color: #28a745;
-    color: #ffffff;
     cursor: pointer;
-    margin-top: 24px;
     transition: background-color 0.2s;
 }
-.predict-btn:hover {
-    background-color: #218838;
 }
-.upload-label {
-    padding: 12px;
-    border: 1px dashed #dcdcdc;
-    border-radius: 6px;
     text-align: center;
-    cursor: pointer;
-    display: block;
-    margin-bottom: 16px;
 }
-input[type="file"] {
     display: none;
 }
-#image-preview {
-    margin-top: 16px;
-    text-align: center;
 }
-#image-preview img {
-    max-width: 100%;
-    max-height: 200px;
-    border-radius: 6px;
 }
-.result-display {
-    margin-top: 24px;
-    padding: 16px;
-    border-radius: 6px;
-    background-color: #f7f9fc;
-    border: 1px solid #e8e8e8;
-    text-align: center;
-    font-size: 18px;
     font-weight: 600;
-    display: none;
 }
-.result-display.loading {
-    color: #555;
 }
-.result-display.success {
-    color: #1a73e8;
 }
-.result-display.error {
-    color: #d93025;
 }

+/* --- General Layout & Dark Theme --- */
 body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #0b0d11;
+    color: #e6edf3;
     margin: 0;
     display: flex;
     justify-content: center;
+    align-items: center;
     min-height: 100vh;
+    padding: 20px;
 }
 .container {
+    background: #1c2128;
+    border-radius: 12px;
+    border: 1px solid #30363d;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     width: 100%;
     max-width: 800px;
     overflow: hidden;
 }
 header {
     text-align: center;
+    padding: 30px;
+    border-bottom: 1px solid #30363d;
 }
 header h1 {
+    margin: 0;
+    font-size: 2.5rem;
     font-weight: 700;
+    color: #e6edf3;
 }
 header p {
+    margin-top: 8px;
+    color: #8b949e;
+    font-size: 1.1rem;
 }
+/* --- Model Selector Navigation --- */
 .model-selector {
     display: flex;
     justify-content: center;
+    padding: 20px;
+    background-color: #161b22;
+    border-bottom: 1px solid #30363d;
 }
 .model-btn {
+    background-color: transparent;
+    border: none;
+    padding: 12px 24px;
+    margin: 0 10px;
+    font-size: 1rem;
     font-weight: 600;
+    color: #8b949e;
     cursor: pointer;
+    border-radius: 8px;
+    transition: background-color 0.2s, color 0.2s;
 }
 .model-btn.active {
+    background-color: #ffd866;
+    color: #000000;
 }
+.model-btn:not(.active):hover {
+    background-color: #30363d;
+    color: #e6edf3;
 }
+/* --- Main Content & Model Sections --- */
 main {
+    padding: 30px;
 }
+.model-section {
     display: none;
+    animation: fadeIn 0.5s;
 }
+.model-section.active {
     display: block;
 }
+.model-section h2 {
     margin-top: 0;
+    font-size: 1.8rem;
+    color: #e6edf3;
+    border-bottom: 2px solid #ffd866;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
 }
+.model-section p {
+    margin-bottom: 20px;
+    line-height: 1.6;
+    color: #8b949e;
 }
+/* --- Forms --- */
+form {
+    display: flex;
+    flex-direction: column;
 }
+textarea, input[type="file"], input[type="number"] {
     width: 100%;
     padding: 12px;
+    background-color: #0d1117;
+    color: #e6edf3;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    font-size: 1rem;
+    margin-bottom: 15px;
+    box-sizing: border-box;
 }
+button[type="submit"] {
+    background-color: #ffd866;
+    color: #000000;
     border: none;
+    padding: 14px 20px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s;
+    align-self: flex-start;
 }
+button[type="submit"]:hover {
+    background-color: #f0c340;
 }
+/* --- Specific Form Styling --- */
+.image-preview-container {
+    margin-bottom: 15px;
     text-align: center;
 }
+.image-preview {
+    max-width: 100%;
+    max-height: 200px;
+    border: 1px solid #30363d;
+    border-radius: 8px;
     display: none;
 }
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
 }
+.form-group label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #e6edf3;
 }
+.beta-tag {
+    background-color: #30363d;
+    color: #8b949e;
+    font-size: 0.8rem;
     font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 12px;
+    vertical-align: middle;
+    margin-left: 8px;
+}
+/* --- Result Display --- */
+.result {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #161b22;
+    border-left: 4px solid #ffd866;
+    border-radius: 4px;
+    font-size: 1.1rem;
+    font-weight: 500;
+    min-height: 24px;
+}
+/* --- Footer --- */
+footer {
+    text-align: center;
+    padding: 20px;
+    background-color: #161b22;
+    border-top: 1px solid #30363d;
+    font-size: 0.9rem;
+    color: #8b949e;
+}
+/* --- Animations --- */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
+/* --- Housing Predictor Form Grid --- */
+.housing-predictor-form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
 }
+.housing-predictor-form-group label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #e6edf3;
 }
+.housing-predictor-form-group input[type="number"] {
+    width: 100%;
+    padding: 12px;
+    background-color: #0d1117;
+    color: #e6edf3;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    font-size: 1rem;
+    margin-bottom: 15px;
+    box-sizing: border-box;
 }