Feat: Integrate Frontend Service with Docker

docker-compose.yml

@@ -0,0 +1,20 @@
+version: '3'
+
+services:
+  backend:
+    build: 
+      context: . # Directory containing the backend Dockerfile and source code
+      dockerfile: Dockerfile  # Path to backend Dockerfile
+      args:
+        API_KEY: ${API_KEY} 
+    ports:
+      - "8000:8000"  # Expose the port the backend service runs on
+    env_file:
+      - .env
+
+  frontend:
+    build: 
+      context: ./frontend  # Directory the frontend Dockerfile and source code
+      dockerfile: Dockerfile  # Path to your frontend Dockerfile
+    ports:
+      - "8501:8501"  # Expose the port the frontend service runs on

frontend/Dockerfile

@@ -0,0 +1,27 @@
+# Use the official Python image 
+FROM python:3.10
+
+# Set the working directory in the container to /app
+WORKDIR /frontend
+
+# Copy the poetry files
+COPY pyproject.toml poetry.lock /frontend/
+
+# Install poetry
+RUN pip install poetry
+
+# Install the dependencies globally within the container.
+RUN poetry config virtualenvs.create false
+
+# Install project dependencies
+RUN poetry lock
+RUN poetry install
+
+# Copy the frontend application file to the working directory
+COPY frontend_app.py .
+
+# Expose the port the app runs on
+EXPOSE 8501
+
+# Execute the script when the container starts
+CMD ["streamlit", "run", "frontend_app.py"]

app/frontend_app.py → frontend/frontend_app.py

@@ -1,8 +1,8 @@
 import streamlit as st
-import requests  # Import requests library
+import requests 
 
 # FastAPI server URL
-SERVER_URL = "http://localhost:8000/recommendations/"  # Replace with your FastAPI server URL
+SERVER_URL = "http://backend:8000/recommendations/" # Replace with localhost if running locally
 
 st.title('Movie Recommendation System')
 
@@ -11,8 +11,8 @@
 num_rec = st.number_input('Number of Recommendations:', min_value=1, value=10)  # Number of recommendations
 
 # Get Recommendations Button
-if st.button('Get Recommendations'):  # If the button is pressed
-    if query:  # If a query is entered
+if st.button('Get Recommendations'):
+    if query:
         st.subheader('Recommendations for "{}":'.format(query))
 
         # Prepare payload

frontend/pyproject.toml

@@ -0,0 +1,15 @@
+[tool.poetry]
+name = "movie-rec-system-frontend"
+version = "0.1.0"
+description = "Frontend for Movie Recommendation System"
+authors = ["Magnus <[email protected]>"]
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.10"
+streamlit = "^1.25.0"
+requests = "^2.31"
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"

pyproject.toml

@@ -1,7 +1,7 @@
 [tool.poetry]
 name = "movie-rec-system"
 version = "0.1.0"
-description = ""
+description = "Backend for Movie Recommendation System"
 authors = ["Magnus <[email protected]>"]
 readme = "README.md"
 
@@ -21,7 +21,6 @@ pytest = "7.4.0"
 uvicorn = "0.23.2"
 httpx = "^0.24.1"
 seaborn = "^0.12.2"
-streamlit = "^1.25.0"
 
 [tool.jupysql.SqlMagic]
 autopandas = true