Hugging Face's logo

Spaces:
Nipun
/
ml-deploy-app
Sleeping

App Files Community
Nipun commited on
Commit
18862b5
·
1 Parent(s): 257772a

Add HTML frontend and curl docs

Browse files
Files changed (2) hide show
  1. README.md +11 -0
  2. app/main.py +70 -2
README.md CHANGED
@@ -106,3 +106,14 @@ The API will be accessible at `http://127.0.0.1:8000` (and `http://127.0.0.1:800
106
 
107
  - **Hugging Face Spaces**: You can deploy this easily to Hugging Face Spaces by adding a `README.md` with YAML metadata and pushing the code.
108
  - **Cloud Deployment**: This Docker container can be deployed to AWS ECS, Google Cloud Run, or Azure Container Apps.
 
 
 
 
 
 
 
 
 
 
 
 
106
 
107
  - **Hugging Face Spaces**: You can deploy this easily to Hugging Face Spaces by adding a `README.md` with YAML metadata and pushing the code.
108
  - **Cloud Deployment**: This Docker container can be deployed to AWS ECS, Google Cloud Run, or Azure Container Apps.
109
+
110
+ ## Deployed Endpoint
111
+
112
+ You can test the deployed API on Hugging Face Spaces:
113
+
114
+ ```bash
115
+ curl -X POST "https://nipun-ml-deploy-app.hf.space/predict" \
116
+ -H "Content-Type: application/json" \
117
+ -d '{"sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2}'
118
+ ```
119
+
app/main.py CHANGED
@@ -6,9 +6,77 @@ app = FastAPI(title="Iris Classification API", version="1.0.0")
6
  # Initialize model
7
  model = IrisModel()
8
 
9
- @app.get("/")
 
 
10
  def read_root():
11
- return {"message": "Welcome to the Iris Classification API"}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
  @app.get("/health")
14
  def health_check():
 
6
  # Initialize model
7
  model = IrisModel()
8
 
9
+ from fastapi.responses import HTMLResponse
10
+
11
+ @app.get("/", response_class=HTMLResponse)
12
  def read_root():
13
+ return """
14
+ <!DOCTYPE html>
15
+ <html>
16
+ <head>
17
+ <title>Iris Classification</title>
18
+ <style>
19
+ body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
20
+ h1 { color: #333; }
21
+ .form-group { margin-bottom: 15px; }
22
+ label { display: block; margin-bottom: 5px; }
23
+ input { padding: 8px; width: 100%; box-sizing: border-box; }
24
+ button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
25
+ button:hover { background-color: #45a049; }
26
+ #result { margin-top: 20px; padding: 10px; border: 1px solid #ddd; display: none; }
27
+ </style>
28
+ </head>
29
+ <body>
30
+ <h1>Iris Classification Model</h1>
31
+ <p>Enter the measurements of the iris flower to predict its species.</p>
32
+
33
+ <div class="form-group">
34
+ <label for="sepal_length">Sepal Length:</label>
35
+ <input type="number" step="0.1" id="sepal_length" value="5.1">
36
+ </div>
37
+ <div class="form-group">
38
+ <label for="sepal_width">Sepal Width:</label>
39
+ <input type="number" step="0.1" id="sepal_width" value="3.5">
40
+ </div>
41
+ <div class="form-group">
42
+ <label for="petal_length">Petal Length:</label>
43
+ <input type="number" step="0.1" id="petal_length" value="1.4">
44
+ </div>
45
+ <div class="form-group">
46
+ <label for="petal_width">Petal Width:</label>
47
+ <input type="number" step="0.1" id="petal_width" value="0.2">
48
+ </div>
49
+
50
+ <button onclick="predict()">Predict</button>
51
+
52
+ <div id="result"></div>
53
+
54
+ <script>
55
+ async function predict() {
56
+ const data = {
57
+ sepal_length: parseFloat(document.getElementById('sepal_length').value),
58
+ sepal_width: parseFloat(document.getElementById('sepal_width').value),
59
+ petal_length: parseFloat(document.getElementById('petal_length').value),
60
+ petal_width: parseFloat(document.getElementById('petal_width').value)
61
+ };
62
+
63
+ const response = await fetch('/predict', {
64
+ method: 'POST',
65
+ headers: {
66
+ 'Content-Type': 'application/json'
67
+ },
68
+ body: JSON.stringify(data)
69
+ });
70
+
71
+ const result = await response.json();
72
+ const resultDiv = document.getElementById('result');
73
+ resultDiv.style.display = 'block';
74
+ resultDiv.innerHTML = `<h3>Prediction: ${result.class_name}</h3><p>Class ID: ${result.class_id}</p>`;
75
+ }
76
+ </script>
77
+ </body>
78
+ </html>
79
+ """
80
 
81
  @app.get("/health")
82
  def health_check():