chore: Add model UI files

api/Dockerfile

@@ -8,6 +8,7 @@ WORKDIR /src
 
 RUN pip install --upgrade pip && pip install -r requirements.txt
 
+# 👇 Uncomment for DEPLOY / Comment for DevContainers
 COPY ./ /src/ 
 
 FROM base AS test

api/app/user/router.py

@@ -1,4 +1,3 @@
-# from typing import List
 from app import db
 from app.auth.jwt import get_current_user
 from fastapi import APIRouter, Depends, HTTPException, status

api/tests/test_router_model.py

@@ -2,11 +2,7 @@ from unittest.mock import AsyncMock, MagicMock, patch
 
 import pytest
 from app.auth.jwt import get_current_user
-
-# from app.model.schema import PredictResponse
 from fastapi import UploadFile
-
-# from fastapi.testclient import TestClient
 from httpx import AsyncClient
 from main import app
 

api/tests/test_utils.py

@@ -1,4 +1,3 @@
-# import os
 from io import BytesIO
 
 import app.utils as utils

model/Dockerfile

@@ -7,6 +7,7 @@ RUN pip3 install -r requirements.txt
 
 ENV PYTHONPATH=$PYTHONPATH:/src/
 
+# 👇 Uncomment for DEPLOY / Comment for DevContainers
 COPY ./ /src/ 
 
 WORKDIR /src

ui/Dockerfile

@@ -0,0 +1,18 @@
+from python:3.8.13 AS base
+
+ENV PYTHONPATH=$PYTHONPATH:/src/
+
+COPY ./requirements.txt /src/requirements.txt
+
+WORKDIR /src
+
+RUN pip install --upgrade pip && pip install -r requirements.txt
+
+# 👇 Uncomment for DEPLOY / Comment for DevContainers
+COPY ./ /src/ 
+
+FROM base AS test
+RUN ["python", "-m", "pytest", "-v", "tests"]
+
+FROM base AS build
+CMD streamlit run --server.port 9090 app/image_classifier_app.py

ui/app/image_classifier_app.py

@@ -0,0 +1,187 @@
+from typing import Optional
+
+import requests
+import streamlit as st
+from app.settings import API_BASE_URL
+from PIL import Image
+
+
+def login(username: str, password: str) -> Optional[str]:
+    """This function calls the login endpoint of the API to authenticate the user
+    and get a token.
+
+    Args:
+        username (str): email of the user
+        password (str): password of the user
+
+    Returns:
+        Optional[str]: token if login is successful, None otherwise
+    """
+    # Construct the API endpoint URL
+    url = "{}/{}".format(API_BASE_URL, "login")
+
+    # Set up the request headers
+    headers = {
+        "accept": "application/json",
+        "Content-Type": "application/x-www-form-urlencoded",
+    }
+
+    # Prepare the data payload
+    data = {
+        "username": username,  # Required
+        "password": password,  # Required
+        "grant_type": "",  # Optionals
+        "scope": "",
+        "client_id": "",
+        "client_secret": "",
+    }
+
+    # Send the API request
+    response = requests.post(url, headers=headers, data=data)
+    if response.status_code == 200:
+        return response.json().get("access_token")
+
+    return None
+
+
+def predict(token: str, uploaded_file: Image) -> requests.Response:
+    """This function calls the predict endpoint of the API to classify the uploaded
+    image.
+
+    Args:
+        token (str): token to authenticate the user
+        uploaded_file (Image): image to classify
+
+    Returns:
+        requests.Response: response from the API
+    """
+    # Create a dictionary with the file data
+    files = {"file": (uploaded_file.name, uploaded_file.getvalue())}
+
+    # Add the token to the headers
+    headers = {"Authorization": f"Bearer {token}"}
+
+    # Make a POST request to the predict endpoint
+    url = f"{API_BASE_URL}/model/predict"
+    response = requests.post(url, files=files, headers=headers)
+
+    return response
+
+
+def send_feedback(
+    token: str, feedback: str, score: float, prediction: str, image_file_name: str
+) -> requests.Response:
+    """This function calls the feedback endpoint of the API to send feedback about
+    the classification.
+
+    Args:
+        token (str): token to authenticate the user
+        feedback (str): string with feedback
+        score (float): confidence score of the prediction
+        prediction (str): predicted class
+        image_file_name (str): name of the image file
+
+    Returns:
+        requests.Response: _description_
+    """
+    # Create a dictionary with the feedback data including feedback, score, predicted_class, and image_file_name
+    data = {
+        "feedback": feedback,
+        "score": score,
+        "predicted_class": prediction,
+        "image_file_name": image_file_name,
+    }
+
+    # Add the token to the headers
+    headers = {"Authorization": f"Bearer {token}"}
+
+    # Make a POST request to the feedback endpoint
+    url = f"{API_BASE_URL}/feedback"
+    response = requests.post(url, json=data, headers=headers)
+
+    return response
+
+
+# User Interface
+st.set_page_config(page_title="Image Classifier", page_icon="📷")
+st.markdown(
+    "<h1 style='text-align: center; color: #4B89DC;'>Image Classifier</h1>",
+    unsafe_allow_html=True,
+)
+
+# Login Form
+if "token" not in st.session_state:
+    st.markdown("## Login")
+    username = st.text_input("Username")
+    password = st.text_input("Password", type="password")
+    if st.button("Login"):
+        token = login(username, password)
+        if token:
+            st.session_state.token = token
+            st.success("Login successful!")
+            st.rerun()  # Refresh UI
+        else:
+            st.error("Login failed. Please check your credentials.")
+else:
+    st.success("You are logged in!")
+
+
+if "token" in st.session_state:
+    token = st.session_state.token
+
+    # Load image
+    uploaded_file = st.file_uploader("Sube una imagen", type=["jpg", "jpeg", "png"])
+
+    print(type(uploaded_file))
+
+    # Display scaled image if uploaded
+    if uploaded_file is not None:
+        image = Image.open(uploaded_file)
+        st.image(image, caption="Imagen subida", width=300)
+
+    if "classification_done" not in st.session_state:
+        st.session_state.classification_done = False
+
+    # Classification button
+    if st.button("Classify"):
+        if uploaded_file is not None:
+            response = predict(token, uploaded_file)
+            if response.status_code == 200:
+                result = response.json()
+                st.write(f"**Prediction:** {result['prediction']}")
+                st.write(f"**Score:** {result['score']}")
+                st.session_state.classification_done = True
+                st.session_state.result = result
+            else:
+                st.error("Error classifying image. Please try again.")
+        else:
+            st.warning("Please upload an image before classifying.")
+
+    # Display feedback field only if image has been classified
+    if st.session_state.classification_done:
+        st.markdown("## Feedback")
+        feedback = st.text_area("If the prediction was wrong, please provide feedback.")
+        if st.button("Send Feedback"):
+            if feedback:
+                token = st.session_state.token
+                result = st.session_state.result
+                score = result["score"]
+                prediction = result["prediction"]
+                image_file_name = result.get("image_file_name", "uploaded_image")
+                response = send_feedback(
+                    token, feedback, score, prediction, image_file_name
+                )
+                if response.status_code == 201:
+                    st.success("Thanks for your feedback!")
+                else:
+                    st.error("Error sending feedback. Please try again.")
+            else:
+                st.warning("Please provide feedback before sending.")
+                st.warning("Please provide feedback before sending.")
+
+    # Footer
+    st.markdown("<hr style='border:2px solid #4B89DC;'>", unsafe_allow_html=True)
+    st.markdown(
+        "<p style='text-align: center; color: #4B89DC;'>2024 Image Classifier App</p>",
+        unsafe_allow_html=True,
+    )

ui/app/settings.py

@@ -0,0 +1,5 @@
+import os
+
+API_HOST = os.getenv("API_HOST", "localhost")
+API_PORT = os.getenv("API_PORT", 8000)
+API_BASE_URL = f"http://{API_HOST}:{API_PORT}"

ui/requirements.txt

@@ -0,0 +1,2 @@
+streamlit
+pytest

ui/tests/test_image_classifier_app.py

@@ -0,0 +1,169 @@
+import os
+import unittest
+from io import BytesIO
+from unittest import mock
+
+import app.image_classifier_app as ui_app
+from PIL import Image
+
+path_tests = os.path.dirname(os.path.abspath(__file__))
+
+
+class TestMLService(unittest.TestCase):
+    # 💡 NOTE Run tests with: python tests/test_image_classifier_app.py
+    def setUp(self):
+        self.token = "dummy_token"
+        self.image_file = Image.open(path_tests + "/dog.jpeg")
+        self.uploaded_file = mock.MagicMock(spec=BytesIO)
+        self.uploaded_file.getvalue.return_value = BytesIO()
+        self.uploaded_file.name = "dog.jpeg"
+        self.image_file.save(self.uploaded_file, format="JPEG")
+        self.headers = {"Authorization": f"Bearer {self.token}"}
+
+    # python3 -m unittest -vvv tests.test_model
+    def test_login_success(self):
+        # 💡 NOTE Run test with: python -m unittest -vvv tests.test_image_classifier_app.TestMLService.test_login_success
+        expected_token = "dummy_token"
+        response_data = {"access_token": expected_token}
+        with mock.patch("requests.post") as mock_post:
+            mock_post.return_value.status_code = 200
+            mock_post.return_value.json.return_value = response_data
+
+            token = ui_app.login("username", "password")
+
+            headers = {
+                "accept": "application/json",
+                "Content-Type": "application/x-www-form-urlencoded",
+            }
+
+            self.assertEqual(token, expected_token)
+            mock_post.assert_called_once_with(
+                ui_app.API_BASE_URL + "/login",
+                headers=headers,
+                data={
+                    "grant_type": "",
+                    "username": "username",
+                    "password": "password",
+                    "scope": "",
+                    "client_id": "",
+                    "client_secret": "",
+                },
+            )
+
+    def test_login_failure(self):
+        # 💡 NOTE Run test with: python -m unittest -vvv tests.test_image_classifier_app.TestMLService.test_login_failure
+        with mock.patch("requests.post") as mock_post:
+            mock_post.return_value.status_code = 401
+
+            token = ui_app.login("username", "password")
+
+            headers = {
+                "accept": "application/json",
+                "Content-Type": "application/x-www-form-urlencoded",
+            }
+
+            self.assertIsNone(token)
+            mock_post.assert_called_once_with(
+                ui_app.API_BASE_URL + "/login",
+                headers=headers,
+                data={
+                    "grant_type": "",
+                    "username": "username",
+                    "password": "password",
+                    "scope": "",
+                    "client_id": "",
+                    "client_secret": "",
+                },
+            )
+
+    def test_predict_success(self):
+        # 💡 NOTE Run test with: python -m unittest -vvv tests.test_image_classifier_app.TestMLService.test_predict_success
+        expected_response = {"prediction": "Eskimo_dog", "score": 0.9346}
+        with mock.patch("requests.post") as mock_post:
+            mock_post.return_value.status_code = 200
+            mock_post.return_value.json.return_value = expected_response
+
+            response = ui_app.predict(self.token, self.uploaded_file)
+
+            self.assertEqual(response.status_code, 200)
+            self.assertEqual(response.json(), expected_response)
+            mock_post.assert_called_once_with(
+                ui_app.API_BASE_URL + "/model/predict",
+                files={
+                    "file": (self.uploaded_file.name, self.uploaded_file.getvalue())
+                },
+                headers=self.headers,
+            )
+
+    def test_predict_failure(self):
+        # 💡 NOTE Run test with: python -m unittest -vvv tests.test_image_classifier_app.TestMLService.test_predict_failure
+        with mock.patch("requests.post") as mock_post:
+            mock_post.return_value.status_code = 500
+
+            response = ui_app.predict(self.token, self.uploaded_file)
+
+            self.assertEqual(response.status_code, 500)
+            mock_post.assert_called_once_with(
+                ui_app.API_BASE_URL + "/model/predict",
+                files={
+                    "file": (self.uploaded_file.name, self.uploaded_file.getvalue())
+                },
+                headers=self.headers,
+            )
+
+    def test_send_feedback_success(self):
+        # 💡 NOTE Run test with: python -m unittest -vvv tests.test_image_classifier_app.TestMLService.test_send_feedback_success
+        expected_response = {"status": "success"}
+        feedback = "This is a feedback"
+        score = 0.9346
+        prediction = "Eskimo_dog"
+        image_file_name = "dog.jpeg"
+        with mock.patch("requests.post") as mock_post:
+            mock_post.return_value.status_code = 201
+            mock_post.return_value.json.return_value = expected_response
+
+            response = ui_app.send_feedback(
+                self.token, feedback, score, prediction, image_file_name
+            )
+
+            self.assertEqual(response.status_code, 201)
+            self.assertEqual(response.json(), expected_response)
+            mock_post.assert_called_once_with(
+                ui_app.API_BASE_URL + "/feedback",
+                json={
+                    "feedback": feedback,
+                    "score": score,
+                    "predicted_class": prediction,
+                    "image_file_name": image_file_name,
+                },
+                headers=self.headers,
+            )
+
+    def test_send_feedback_failure(self):
+        # 💡 NOTE Run test with: python -m unittest -vvv tests.test_image_classifier_app.TestMLService.test_send_feedback_failure
+        feedback = "This is a feedback"
+        score = 0.9346
+        prediction = "Eskimo_dog"
+        image_file_name = "dog.jpeg"
+        with mock.patch("requests.post") as mock_post:
+            mock_post.return_value.status_code = 500
+
+            response = ui_app.send_feedback(
+                self.token, feedback, score, prediction, image_file_name
+            )
+
+            self.assertEqual(response.status_code, 500)
+            mock_post.assert_called_once_with(
+                ui_app.API_BASE_URL + "/feedback",
+                json={
+                    "feedback": feedback,
+                    "score": score,
+                    "predicted_class": prediction,
+                    "image_file_name": image_file_name,
+                },
+                headers=self.headers,
+            )
+
+
+if __name__ == "__main__":
+    unittest.main(verbosity=2)