Spaces:
Sleeping
Sleeping
File size: 4,690 Bytes
67c8aca c0bd6ec 67c8aca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | import { useState } from 'react';
import axios from 'axios';
import { ArrowRight } from 'lucide-react';
export default function Form({ setResult, setLoading }) {
const [formData, setFormData] = useState({
gender: 'Male',
married: 'No',
dependents: '0',
education: 'Graduate',
self_employed: 'No',
applicant_income: 5000,
coapplicant_income: 0,
loan_amount: 100,
loan_amount_term: 360,
credit_history: 1.0,
property_area: 'Urban'
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: ['applicant_income', 'coapplicant_income', 'loan_amount', 'loan_amount_term', 'credit_history'].includes(name)
? parseFloat(value)
: value
}));
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
try {
const response = await axios.post('/api/predict', formData);
setResult(response.data);
} catch (error) {
console.error("Prediction error", error);
alert('Error predicting. Make sure backend is running.');
} finally {
setLoading(false);
}
};
return (
<div className="glass-card" style={{ maxWidth: '800px', margin: '0 auto' }}>
<h2 style={{ marginBottom: '1.5rem' }}>Application Details</h2>
<form onSubmit={handleSubmit}>
<div className="form-grid">
<div className="form-group">
<label>Gender</label>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div className="form-group">
<label>Married</label>
<select name="married" value={formData.married} onChange={handleChange}>
<option>No</option>
<option>Yes</option>
</select>
</div>
<div className="form-group">
<label>Dependents</label>
<select name="dependents" value={formData.dependents} onChange={handleChange}>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3+</option>
</select>
</div>
<div className="form-group">
<label>Education</label>
<select name="education" value={formData.education} onChange={handleChange}>
<option>Graduate</option>
<option>Not Graduate</option>
</select>
</div>
<div className="form-group">
<label>Self Employed</label>
<select name="self_employed" value={formData.self_employed} onChange={handleChange}>
<option>No</option>
<option>Yes</option>
</select>
</div>
<div className="form-group">
<label>Applicant Income (Monthly)</label>
<input type="number" name="applicant_income" value={formData.applicant_income} onChange={handleChange} required />
</div>
<div className="form-group">
<label>Co-Applicant Income</label>
<input type="number" name="coapplicant_income" value={formData.coapplicant_income} onChange={handleChange} required />
</div>
<div className="form-group">
<label>Loan Amount (in Thousands)</label>
<input type="number" name="loan_amount" value={formData.loan_amount} onChange={handleChange} required />
</div>
<div className="form-group">
<label>Loan Term (Months)</label>
<input type="number" name="loan_amount_term" value={formData.loan_amount_term} onChange={handleChange} required />
</div>
<div className="form-group">
<label>Credit History</label>
<select name="credit_history" value={formData.credit_history} onChange={handleChange}>
<option value="1.0">Good (1.0)</option>
<option value="0.0">Bad (0.0)</option>
</select>
</div>
<div className="form-group">
<label>Property Area</label>
<select name="property_area" value={formData.property_area} onChange={handleChange}>
<option>Urban</option>
<option>Semiurban</option>
<option>Rural</option>
</select>
</div>
</div>
<div style={{ marginTop: '2rem', textAlign: 'right' }}>
<button type="submit" className="btn">
Analyze Application <ArrowRight size={18} />
</button>
</div>
</form>
</div>
);
}
|