First setup

.dockerignore

@@ -0,0 +1,9 @@
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.env
+.git
+.gitignore
+archive/*
+archive/

Dockerfile

@@ -1,36 +1,23 @@
+# Use an official Python runtime as a base image
 FROM python:3.9-slim
 
-# install node.js for frontend
-RUN apt-get update && apt-get install -y curl
-RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
-RUN apt-get install -y nodejs
-
-# don't create .pyc files on the import of source files
+# Environment variables to prevent Python from writing pyc files and buffering stdout/stderr
 ENV PYTHONDONTWRITEBYTECODE=1
-# see input/output in real time in terminal
 ENV PYTHONUNBUFFERED=1
 
-RUN useradd -m -u 1000 user
-USER user
-ENV PATH="/home/user/.local/bin:$PATH"
-
-#set working directory (where COPY– RUN– EXPOSE– is run from)
+# Set working directory inside the container
 WORKDIR /app
 
-# install requirements.txt (generated that using pipreqs) using python -m syntax, because I wanna install the packages into the current working python version
-COPY --chown=user:users ./requirements.txt requirements.txt
-RUN pip install --no-cache-dir --upgrade pip
-RUN pip install --no-cache-dir -r requirements.txt
-COPY --chown=user:users . /app
-
-COPY frontend/package.json frontend/package-lock.json ./frontend/
-RUN cd frontend && npm install
-COPY frontend/ ./frontend/
-RUN cd frontend && npm run build
-
+# Copy and install the backend requirements
+COPY backend/requirements.txt /app/backend/requirements.txt
+RUN pip install --upgrade pip
+RUN pip install -r /app/backend/requirements.txt
 
-EXPOSE 7860
-RUN pip install uvicorn aiofiles
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
+# Copy the entire project into the container
+COPY . /app
 
+# Expose port 8000 (the port our app will run on)
+EXPOSE 8000
 
+# Command to run the FastAPI app using Uvicorn
+CMD ["uvicorn", "backend.app:app", "--host", "0.0.0.0", "--port", "8000"]

archive/Dockerfile

@@ -0,0 +1,36 @@
+FROM python:3.9-slim
+
+# install node.js for frontend
+RUN apt-get update && apt-get install -y curl
+RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
+RUN apt-get install -y nodejs
+
+# don't create .pyc files on the import of source files
+ENV PYTHONDONTWRITEBYTECODE=1
+# see input/output in real time in terminal
+ENV PYTHONUNBUFFERED=1
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+#set working directory (where COPY– RUN– EXPOSE– is run from)
+WORKDIR /app
+
+# install requirements.txt (generated that using pipreqs) using python -m syntax, because I wanna install the packages into the current working python version
+COPY --chown=user:users ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+COPY --chown=user:users . /app
+
+COPY frontend/package.json frontend/package-lock.json ./frontend/
+RUN cd frontend && npm install
+COPY frontend/ ./frontend/
+RUN cd frontend && npm run build
+
+
+EXPOSE 7860
+RUN pip install uvicorn aiofiles
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
+
+

app.py → backend/app.py

@@ -1,49 +1,64 @@
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from transformers import GPT2Tokenizer, GPT2Model, AutoModel
+from fastapi.staticfiles import StaticFiles
+from transformers import GPT2Tokenizer, GPT2Model
 import torch as t
 import logging
+
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
 app = FastAPI()
 
+# Configure CORS: In production, you might restrict allowed origins
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"], # -> replace with our frontend URL, I think. So Vercel or something
-    allow_methods=["POST"], # -> a POST API requests sends information to the server, i.e. login-credentials
+    allow_origins=["*"],
+    allow_methods=["*"],
     allow_headers=["*"],
 )
 
-tokenizer = GPT2Tokenizer.from_pretrained('gpt2') # -> get tokenizer which transforms text sequence in tokens
+# Mount static files (frontend) so that visiting "/" serves index.html
+# Note: The directory path "../frontend" works because when running in Docker,
+# our working directory is set to /app, and the frontend folder is at /app/frontend.
+app.mount("/", StaticFiles(directory="../frontend", html=True), name="static")
+
+# Load tokenizer and GPT2 model
+tokenizer = GPT2Tokenizer.from_pretrained('gpt2')
 try:
     model = GPT2Model.from_pretrained('gpt2', output_attentions=True)
 except Exception as e:
     logger.error(f"Model loading failed: {e}")
     raise
 
-@app.post("/process") # test with uvicorn main:app --reload :) then open http://localhost:8000/docs
-async def process_text(text: str): # define process operation, i.e. what happens when a POST request has been sent
+@app.post("/process")
+async def process_text(text: str):
+    """
+    Process the input text:
+      - Tokenizes the text
+      - Runs the GPT2 model to obtain attentions
+      - Returns the tokens and attention values (rounded to 2 decimals)
+    """
     try:
         logger.info(f"Received text: {text}")
-        # Tokenize input
+        # Tokenize input text (truncating if needed)
         inputs = tokenizer(text, return_tensors="pt", truncation=True, max_length=512)
 
-        # Run model
+        # Run the model without gradient computation (inference mode)
         with t.no_grad():
-            outputs = model(**inputs) # ** notation is the unpack operator on dictionaries (confirm that inputs is a dictionary)
-        attentions = outputs.attentions  # Tuple of attention tensors (layers x heads)
+            outputs = model(**inputs)
+        attentions = outputs.attentions  # Tuple of attention tensors for each layer
 
         decimals = 2
-        factor = 10**decimals
+        # Convert attention tensors to lists with rounded decimals
         attn_series = t.round(t.tensor([
             layer_attention.tolist() for layer_attention in attentions
-        ], dtype=t.double).squeeze(), decimals=2).detach().cpu().tolist()
+        ], dtype=t.double).squeeze(), decimals=decimals).detach().cpu().tolist()
 
         return {
-            "tokens": tokenizer.convert_ids_to_tokens(inputs["input_ids"][0]), # convert back to tokens
+            "tokens": tokenizer.convert_ids_to_tokens(inputs["input_ids"][0]),
             "attention": attn_series
         }
-    except Exception as e: # if post request failed
+    except Exception as e:
         logger.error(f"Error processing text: {e}")
-        raise HTTPException(status_code=500, detail=str(e))
+        raise HTTPException(status_code=500, detail=str(e))

frontend/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GPT2 WebApp</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>GPT2 WebApp</h1>
+  <form id="textForm">
+    <textarea id="inputText" rows="4" cols="50" placeholder="Enter text here..."></textarea><br>
+    <button type="submit">Process</button>
+  </form>
+  <div id="output">
+    <!-- Processed output will be displayed here -->
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>