Upload 9 files

.dockerignore

@@ -0,0 +1,8 @@
+.venv
+__pycache__
+*.pyc
+.git
+.gitignore
+Dockerfile
+README.md
+poetry.lock

.gitignore

@@ -0,0 +1,15 @@
+# Python
+__pycache__/
+*.py[cod]
+
+# Virtual environments
+venv/
+env/
+
+# IDE files (example)
+.vscode/
+.idea/
+
+# OS files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,18 @@
+# Use a lightweight Python image
+FROM python:3.12.10-slim
+
+# Set a working directory
+WORKDIR /app
+
+# Copy requirements and install
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the entire repo into /app
+COPY . .
+
+# Expose the Flask port
+EXPOSE 5000
+
+# Default command
+CMD ["python", "app/app.py"]

README.md

@@ -1,11 +1,18 @@
----
-title: Mlops Project Webapp
-emoji: 🚀
-colorFrom: blue
-colorTo: purple
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MLOps Project WebApp
+
+This repository contains a Flask web application that downloads a model from the Hugging Face Hub and serves predictions through a simple user interface.
+
+## Project Structure
+
+- `app/`: Contains the Flask application code, including:
+    - `app.py`: The main Flask entry point.
+    - `templates/`: Directory for HTML templates.
+    - `static/`: Directory for CSS, JS, and other static files.
+- `.github/workflows/`: Contains GitHub Actions workflow for CI/CD (`main.yml`).
+- `Dockerfile`: Used to build the Docker image.
+
+## Getting Started
+
+1. **Install Dependencies** (Locally):
+   ```bash
+   pip install -r requirements.txt

app/app.py

@@ -0,0 +1,79 @@
+import os
+import joblib
+import logging
+from typing import Any, Dict, List, Optional
+
+import pandas as pd
+from flask import Flask, request, jsonify, render_template, Response
+from flask.typing import ResponseReturnValue
+from huggingface_hub import hf_hub_download
+from sklearn.base import BaseEstimator
+
+app: Flask = Flask(__name__)
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger: logging.Logger = logging.getLogger(__name__)
+
+# Environment variables for configuration
+HF_REPO_ID: str = os.getenv("HF_REPO_ID", "trungngnthanh/mlops-project")
+MODEL_FILENAME: str = os.getenv("MODEL_FILENAME", "model.joblib")
+HF_REVISION: str = os.getenv("HF_REVISION", "main")
+
+# Global model variable, initially None.
+model: Optional[BaseEstimator] = None
+
+try:
+    logger.info("Downloading model from Hugging Face Hub...")
+    model_path: str = hf_hub_download(
+        repo_id=HF_REPO_ID,
+        filename=MODEL_FILENAME,
+        revision=HF_REVISION
+    )
+    model = joblib.load(model_path)
+    logger.info("Model loaded successfully from Hugging Face Hub.")
+except Exception as e:
+    logger.error(f"Error loading model: {e}")
+    model = None
+
+@app.route("/")
+def index() -> str:
+    """Render the home page."""
+    return render_template("index.html")
+
+@app.route("/predict", methods=["POST"])
+def predict() -> ResponseReturnValue:
+    """
+    Predict endpoint that accepts a JSON payload with a "data" key.
+    Converts the received data to a DataFrame with valid feature names if needed
+    and returns the prediction result as JSON.
+    """
+    if model is None:
+        return jsonify({"error": "Model not available."}), 500
+
+    data: Optional[Dict[str, Any]] = request.get_json()
+    if not data or "data" not in data:
+        return jsonify({"error": "Missing 'data' in request payload."}), 400
+
+    try:
+        # Expected input: a list of samples (list of lists of feature values)
+        input_data: List[Any] = data["data"]
+
+        # If model was trained with feature names, convert input_data to a DataFrame.
+        if hasattr(model, "feature_names_in_"):
+            feature_names = model.feature_names_in_
+            # Assume input_data is list of samples. Convert using pandas DataFrame.
+            input_df = pd.DataFrame(input_data, columns=feature_names)
+            predictions: List[Any] = model.predict(input_df).tolist()
+        else:
+            predictions = model.predict(input_data).tolist()
+
+        return jsonify({"predictions": predictions})
+    except Exception as e:
+        logger.error(f"Prediction error: {e}")
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == "__main__":
+    port: int = int(os.getenv("PORT", "5000"))
+    app.run(host="0.0.0.0", port=port)
+    

app/static/style.css

@@ -0,0 +1,51 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: #f8f9fa;
+}
+
+.container {
+    width: 600px;
+    margin: 50px auto;
+    background: #ffffff;
+    padding: 20px;
+    box-shadow: 2px 2px 12px #aaaaaa;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label {
+    margin-bottom: 5px;
+}
+
+input[type="text"] {
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+button {
+    background-color: #4285f4;
+    color: white;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    width: 150px;
+}
+
+button:hover {
+    background-color: #3367d6;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 18px;
+}

app/templates/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>MLOps Project WebApp</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+<div class="container">
+    <h1>Welcome to the MLOps Project Web App</h1>
+    <form id="predictionForm">
+        <label for="features">Enter features (comma-separated):</label>
+        <input type="text" id="features" name="features" placeholder="0.1, 0.2, 0.3, ..." />
+        <button type="submit">Predict</button>
+    </form>
+    <div id="result"></div>
+</div>
+
+<script>
+    document.getElementById("predictionForm").addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const featuresInput = document.getElementById("features").value;
+        const features = featuresInput.split(",").map(v => parseFloat(v.trim()));
+        const payload = { data: [features] };
+
+        const responseDiv = document.getElementById("result");
+        responseDiv.innerHTML = "Predicting...";
+
+        try {
+            const res = await fetch("/predict", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
+            if (res.ok) {
+                responseDiv.innerHTML = `<h2>Prediction: ${data.predictions}</h2>`;
+            } else {
+                responseDiv.innerHTML = `<h2>Error: ${data.error}</h2>`;
+            }
+        } catch (err) {
+            responseDiv.innerHTML = `<h2>Error: ${err}</h2>`;
+        }
+    });
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,5 @@
+Flask
+scikit-learn
+joblib
+huggingface-hub
+pandas