File size: 5,138 Bytes
e3e1326
 
 
 
 
 
 
 
18862b5
 
 
e3e1326
18862b5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0b70e0a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18862b5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e3e1326
 
 
 
 
 
 
 
 
 
 
 
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
129
130
131
132
133
134
135
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))