Merge pull request #26 from MLOps-essi-upc/web-app

web-app done
MLOps-essi-upc · Nov 29, 2023 · 7b012f6 · 7b012f6
2 parents 1522a37 + 3838feb
commit 7b012f6
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 0 deletions.
diff --git a/src/web/app.py b/src/web/app.py
@@ -0,0 +1,68 @@
+from flask import Flask, render_template, request
+import os
+import tempfile
+import subprocess
+import json
+import sys
+
+def process_input(input_str):
+    # Find the start and end indices of the JSON data
+    start_index = input_str.find('{')
+    end_index = input_str.rfind('}') + 1
+
+    # Extract the JSON data
+    json_data = input_str[start_index:end_index]
+    # Parse the input string
+    data = json.loads(json_data)
+
+    # Extract the probabilities list and prediction
+    probs = data["probs"][0]
+    prediction = data["prediction"]
+
+    # Find the index of the maximum probability
+    max_prob_index = probs.index(max(probs))
+
+    # Create a new dictionary with only the maximum probability and prediction
+    result = {
+        "max_prob": round(probs[max_prob_index],3),
+        "prediction": prediction
+    }
+
+    return result
+
+adress = sys.argv[1]
+
+app = Flask(__name__)
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return 'No file part'
+
+    file = request.files['file']
+
+    if file.filename == '':
+        return 'No selected file'
+
+    # Save the file to a temporary location
+    temp_dir = tempfile.mkdtemp()
+    file_path = os.path.join(temp_dir, file.filename)
+    file.save(file_path)
+
+    #print("The received argument variable is: ", adress)
+    command = f"curl -X POST -H 'Content-Type: multipart/form-data' -H 'Accept: application/json' -F 'beans_img=@{file_path}' http://{adress}:4000/make_prediction"
+    # Get the classification result
+    response = subprocess.getoutput(command)
+
+    # Convert the response to a JSON object
+    result = process_input(response)
+
+    # Render the results page
+    return render_template('result.html', result=result)
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/src/web/starter.py b/src/web/starter.py
@@ -0,0 +1,32 @@
+import subprocess
+
+def get_docker_status():
+    docker_status = input("Is Docker running locally or externally? (local/external): ")
+    return docker_status.lower()
+
+def get_public_ip():
+    public_ip = input("Enter the public IP: ")
+    return public_ip
+
+def save_public_ip(public_ip):
+    # Save the public IP to a file or database
+    # You can customize this function based on your requirements
+    # For example, you can save it to a file using the following code:
+    with open("public_ip.txt", "w") as file:
+        file.write(public_ip)
+
+def run_app(public_ip):
+    # Run app.py passing the public IP as an argument
+    subprocess.run(["python", "app.py", public_ip])
+
+def main():
+    docker_status = get_docker_status()
+    if docker_status == "external":
+        public_ip = get_public_ip()
+        save_public_ip(public_ip)
+    else:
+        public_ip = "localhost"
+    run_app(public_ip)
+
+if __name__ == "__main__":
+    main()
diff --git a/src/web/templates/index.html b/src/web/templates/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Classification</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            height: 100vh;
+            background: linear-gradient(to right, #00b09b, #96c93d);
+            color: #fff;
+            font-family: 'Arial', sans-serif;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        form {
+            text-align: center;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        label {
+            display: inline-block;
+            margin-top: 10px;
+            padding: 10px 20px;
+            background-color: #fff;
+            color: #333;
+            cursor: pointer;
+            border-radius: 5px;
+            font-weight: bold;
+        }
+
+        button {
+            margin-top: 10px;
+            padding: 10px 20px;
+            background-color: #fff;
+            color: #333;
+            cursor: pointer;
+            border: none;
+            border-radius: 5px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <h1>Please upload your image of a bean leaf for analysis</h1>
+        <form action="/upload" method="post" enctype="multipart/form-data">
+        <label for="file">Choose a file</label>
+        <input type="file" name="file" id="file" accept="image/*" required>
+        <button type="submit">Upload and Analyze</button>
+    </form>
+</body>
+</html>
diff --git a/src/web/templates/result.html b/src/web/templates/result.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Classification Result</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            height: 100vh;
+            background: linear-gradient(to right, #00b09b, #96c93d);
+            color: #fff;
+            font-family: 'Arial', sans-serif;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        p {
+            text-align: center;
+            margin: 10px 0;
+        }
+
+        a {
+            color: #fff;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <h1>Classification Result</h1>
+    <p>Prediction: {{ result.prediction }}</p>
+    <p>Probability of that prediction: {{ result.max_prob }}</p>
+    <a href="/">Upload another image</a>
+</body>
+</html>