Spaces:

yohannesdesta
/

up-predict

Sleeping

App Files Files Community

yohannesdesta commited on Jan 23

Commit

aa557dc

1 Parent(s): 1272d50

ui, null handle

Browse files

Files changed (3) hide show

app.py +23 -9
requirements.txt +1 -0
templates/index.html +251 -31

app.py CHANGED Viewed

@@ -4,6 +4,8 @@ from fastapi.templating import Jinja2Templates
 from fastapi.requests import Request
 import pickle
 import pandas as pd
 app = FastAPI()
 templates = Jinja2Templates(directory="templates")
@@ -12,6 +14,16 @@ model = pickle.load(open("hiring_model.pkl", "rb"))
 def predict_job(job_data):
     df = pd.DataFrame([job_data])
     probability = model.predict_proba(df)[0][1]
     prediction = "HIRED" if probability > 0.5 else "NOT_HIRED"
@@ -21,22 +33,24 @@ def predict_job(job_data):
         "confidence": "High" if probability > 0.7 or probability < 0.3 else "Medium"
     }
 @app.get("/", response_class=HTMLResponse)
 def home(request: Request):
     return templates.TemplateResponse("index.html", {"request": request})
 @app.post("/predict", response_class=HTMLResponse)
 def predict(
     request: Request,
-    client_hire_rate: float = Form(...),
-    client_age_years: float = Form(...),
-    client_active_hires: int = Form(...),
-    client_avg_hourly_rate: float = Form(...),
-    client_total_reviews: int = Form(...),
-    client_total_hires: int = Form(...),
-    client_total_hours: int = Form(...),
-    client_total_spent: float = Form(...),
-    client_rating: float = Form(...)
 ):
     job_data = {
         "client_hire_rate": client_hire_rate,

 from fastapi.requests import Request
 import pickle
 import pandas as pd
+from typing import Optional
+import numpy as np
 app = FastAPI()
 templates = Jinja2Templates(directory="templates")
 def predict_job(job_data):
     df = pd.DataFrame([job_data])
+    # Convert None → NaN
+    df = df.replace({None: np.nan})
+    # OPTION A (recommended): fill with 0
+    df = df.fillna(0)
+    # OPTION B (better if you have training means):
+    # df = df.fillna(TRAINING_MEANS_DICT)
     probability = model.predict_proba(df)[0][1]
     prediction = "HIRED" if probability > 0.5 else "NOT_HIRED"
         "confidence": "High" if probability > 0.7 or probability < 0.3 else "Medium"
     }
 @app.get("/", response_class=HTMLResponse)
 def home(request: Request):
     return templates.TemplateResponse("index.html", {"request": request})
 @app.post("/predict", response_class=HTMLResponse)
 def predict(
     request: Request,
+    client_hire_rate: Optional[float] = Form(None),
+    client_age_years: Optional[float] = Form(None),
+    client_active_hires: Optional[int] = Form(None),
+    client_avg_hourly_rate: Optional[float] = Form(None),
+    client_total_reviews: Optional[int] = Form(None),
+    client_total_hires: Optional[int] = Form(None),
+    client_total_hours: Optional[int] = Form(None),
+    client_total_spent: Optional[float] = Form(None),
+    client_rating: Optional[float] = Form(None),
 ):
     job_data = {
         "client_hire_rate": client_hire_rate,

requirements.txt CHANGED Viewed

@@ -5,3 +5,4 @@ python-multipart
 xgboost
 fastapi
 uvicorn[standard]

 xgboost
 fastapi
 uvicorn[standard]
+numpy

templates/index.html CHANGED Viewed

@@ -1,38 +1,258 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Hiring Prediction</title>
-    <style>
-        body { font-family: Arial; max-width: 600px; margin: auto; }
-        input { width: 100%; margin-bottom: 10px; padding: 8px; }
-        button { padding: 10px; width: 100%; }
-        .result { margin-top: 20px; padding: 15px; border: 1px solid #ccc; }
-    </style>
 </head>
 <body>
-    <h2>Job Hiring Prediction</h2>
-    <form method="post" action="/predict">
-        <input name="client_hire_rate" placeholder="Client Hire Rate (%)" required>
-        <input name="client_age_years" placeholder="Client Age (years)" required>
-        <input name="client_active_hires" placeholder="Active Hires" required>
-        <input name="client_avg_hourly_rate" placeholder="Avg Hourly Rate" required>
-        <input name="client_total_reviews" placeholder="Total Reviews" required>
-        <input name="client_total_hires" placeholder="Total Hires" required>
-        <input name="client_total_hours" placeholder="Total Hours" required>
-        <input name="client_total_spent" placeholder="Total Spent ($)" required>
-        <input name="client_rating" placeholder="Client Rating" required>
-        <button type="submit">Predict</button>
-    </form>
-    {% if result %}
-    <div class="result">
-        <h3>Result</h3>
-        <p><strong>Prediction:</strong> {{ result.prediction }}</p>
-        <p><strong>Probability:</strong> {{ result.hire_probability }}%</p>
-        <p><strong>Confidence:</strong> {{ result.confidence }}</p>
     </div>
-    {% endif %}
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Upwork Hiring Predictor</title>
+  <style>
+    :root {
+      --bg: #0f172a;
+      --card: #111827;
+      --input: #1f2933;
+      --border: #374151;
+      --text: #e5e7eb;
+      --muted: #9ca3af;
+      --primary: #3b82f6;
+      --success: #22c55e;
+      --danger: #ef4444;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+      background: linear-gradient(135deg, #020617, #020617);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+    .container {
+      width: 100%;
+      max-width: 720px;
+    }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 28px;
+      box-shadow: 0 20px 40px rgba(0,0,0,.4);
+    }
+    h1 {
+      margin: 0 0 8px;
+      font-size: 1.6rem;
+      font-weight: 600;
+      text-align: center;
+    }
+    .subtitle {
+      text-align: center;
+      color: var(--muted);
+      margin-bottom: 28px;
+      font-size: 0.95rem;
+    }
+    form {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    label {
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    input {
+      background: var(--input);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 10px 12px;
+      color: var(--text);
+      font-size: 0.9rem;
+      outline: none;
+    }
+    input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 1px var(--primary);
+    }
+    .full {
+      grid-column: span 2;
+    }
+    button {
+      margin-top: 10px;
+      padding: 12px;
+      border-radius: 12px;
+      border: none;
+      background: var(--primary);
+      color: white;
+      font-size: 1rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: transform .05s ease, opacity .2s ease;
+    }
+    button:hover {
+      opacity: 0.9;
+    }
+    button:active {
+      transform: scale(0.98);
+    }
+    .result {
+      margin-top: 28px;
+      padding: 20px;
+      border-radius: 14px;
+      border: 1px solid var(--border);
+      background: #020617;
+      text-align: center;
+    }
+    .badge {
+      display: inline-block;
+      padding: 6px 14px;
+      border-radius: 999px;
+      font-size: 0.75rem;
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+    .badge.hired {
+      background: rgba(34,197,94,.15);
+      color: var(--success);
+    }
+    .badge.not {
+      background: rgba(239,68,68,.15);
+      color: var(--danger);
+    }
+    .prob {
+      font-size: 2rem;
+      font-weight: 600;
+      margin: 8px 0;
+    }
+    .confidence {
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+    footer {
+      margin-top: 18px;
+      text-align: center;
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    /* 📱 Mobile */
+    @media (max-width: 640px) {
+      form {
+        grid-template-columns: 1fr;
+      }
+      .full {
+        grid-column: span 1;
+      }
+    }
+  </style>
 </head>
 <body>
+  <div class="container">
+    <div class="card">
+      <h1>Upwork Hiring Predictor</h1>
+      <div class="subtitle">
+        Estimate the probability that a job will result in a hire
+      </div>
+      <form method="post" action="/predict">
+        <div class="field">
+          <label>Client Hire Rate (%)</label>
+          <input name="client_hire_rate" >
+        </div>
+        <div class="field">
+          <label>Client Age (years)</label>
+          <input name="client_age_years" >
+        </div>
+        <div class="field">
+          <label>Active Hires</label>
+          <input name="client_active_hires" >
+        </div>
+        <div class="field">
+          <label>Avg Hourly Rate ($)</label>
+          <input name="client_avg_hourly_rate" >
+        </div>
+        <div class="field">
+          <label>Total Reviews</label>
+          <input name="client_total_reviews" >
+        </div>
+        <div class="field">
+          <label>Total Hires</label>
+          <input name="client_total_hires" >
+        </div>
+        <div class="field">
+          <label>Total Hours</label>
+          <input name="client_total_hours" >
+        </div>
+        <div class="field">
+          <label>Total Spent ($)</label>
+          <input name="client_total_spent" >
+        </div>
+        <div class="field full">
+          <label>Client Rating</label>
+          <input name="client_rating" >
+        </div>
+        <button class="full" type="submit">
+          Predict Hiring Outcome
+        </button>
+      </form>
+      {% if result %}
+      <div class="result">
+        <div class="badge {{ 'hired' if result.prediction == 'HIRED' else 'not' }}">
+          {{ result.prediction }}
+        </div>
+        <div class="prob">
+          {{ result.hire_probability }}%
+        </div>
+        <div class="confidence">
+          Confidence: {{ result.confidence }}
+        </div>
+      </div>
+      {% endif %}
     </div>
+    <footer>
+      Built with FastAPI · Model-based prediction
+    </footer>
+  </div>
 </body>
 </html>