ml-deploy-app / app /main.py
Nipun's picture
Add API usage examples to web app
0b70e0a
from fastapi import FastAPI, HTTPException
from app.model import IrisModel, IrisInput, IrisPrediction
app = FastAPI(title="Iris Classification API", version="1.0.0")
# Initialize model
model = IrisModel()
from fastapi.responses import HTMLResponse
@app.get("/", response_class=HTMLResponse)
def read_root():
return """
<!DOCTYPE html>
<html>
<head>
<title>Iris Classification</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
h1 { color: #333; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input { padding: 8px; width: 100%; box-sizing: border-box; }
button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
#result { margin-top: 20px; padding: 10px; border: 1px solid #ddd; display: none; }
</style>
</head>
<body>
<h1>Iris Classification Model</h1>
<p>Enter the measurements of the iris flower to predict its species.</p>
<div class="form-group">
<label for="sepal_length">Sepal Length:</label>
<input type="number" step="0.1" id="sepal_length" value="5.1">
</div>
<div class="form-group">
<label for="sepal_width">Sepal Width:</label>
<input type="number" step="0.1" id="sepal_width" value="3.5">
</div>
<div class="form-group">
<label for="petal_length">Petal Length:</label>
<input type="number" step="0.1" id="petal_length" value="1.4">
</div>
<div class="form-group">
<label for="petal_width">Petal Width:</label>
<input type="number" step="0.1" id="petal_width" value="0.2">
</div>
<button onclick="predict()">Predict</button>
<div id="result"></div>
<div style="margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px;">
<h2>API Usage</h2>
<p>You can also access this model via the API.</p>
<h3>cURL</h3>
<pre style="background: #f4f4f4; padding: 10px; border-radius: 5px; overflow-x: auto;">
curl -X POST "https://nipun-ml-deploy-app.hf.space/predict" \
-H "Content-Type: application/json" \
-d '{"sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2}'</pre>
<h3>Python</h3>
<pre style="background: #f4f4f4; padding: 10px; border-radius: 5px; overflow-x: auto;">
import requests
url = "https://nipun-ml-deploy-app.hf.space/predict"
data = {
"sepal_length": 5.1,
"sepal_width": 3.5,
"petal_length": 1.4,
"petal_width": 0.2
}
response = requests.post(url, json=data)
print(response.json())</pre>
<h3>JavaScript</h3>
<pre style="background: #f4f4f4; padding: 10px; border-radius: 5px; overflow-x: auto;">
fetch("https://nipun-ml-deploy-app.hf.space/predict", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
sepal_length: 5.1,
sepal_width: 3.5,
petal_length: 1.4,
petal_width: 0.2
})
})
.then(response => response.json())
.then(data => console.log(data));</pre>
</div>
<script>
async function predict() {
const data = {
sepal_length: parseFloat(document.getElementById('sepal_length').value),
sepal_width: parseFloat(document.getElementById('sepal_width').value),
petal_length: parseFloat(document.getElementById('petal_length').value),
petal_width: parseFloat(document.getElementById('petal_width').value)
};
const response = await fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
const resultDiv = document.getElementById('result');
resultDiv.style.display = 'block';
resultDiv.innerHTML = `<h3>Prediction: ${result.class_name}</h3><p>Class ID: ${result.class_id}</p>`;
}
</script>
</body>
</html>
"""
@app.get("/health")
def health_check():
return {"status": "healthy"}
@app.post("/predict", response_model=IrisPrediction)
def predict_iris(input_data: IrisInput):
try:
prediction = model.predict(input_data)
return prediction
except Exception as e:
raise HTTPException(status_code=500, detail=str(e))