Fixed the UI issue

app/main.py

@@ -8,10 +8,13 @@ from fastapi import FastAPI, Request, APIRouter, File, UploadFile
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.middleware.trustedhost import TrustedHostMiddleware
+from starlette.middleware.httpsredirect import HTTPSRedirectMiddleware
 from app.config import settings
 from app import __version__
 from app.Hackathon_setup import face_recognition, exp_recognition
 
+import os
 import numpy as np
 from PIL import Image
 
@@ -33,19 +36,19 @@ expr_rec_filename = None
 
 
 ####################################  Home Page endpoints  #################################################
-@app.get("/")
+@app.get("/", name="root")
 async def root(request: Request):
     return templates.TemplateResponse("index.html", {'request': request,})
 
 
 ####################################  Face Similarity endpoints  #################################################
-@app.get("/similarity/")
+@app.get("/similarity/", name="similarity_root")
 async def similarity_root(request: Request):
     return templates.TemplateResponse("similarity.html", {'request': request,})
 
 
-@app.post("/predict_similarity/")
-async def create_upload_files(request: Request, file1: UploadFile = File(...), file2: UploadFile = File(...)):
+@app.post("/predict_similarity/", name="predict_similarity")
+async def predict_similarity(request: Request, file1: UploadFile = File(...), file2: UploadFile = File(...)):
     global simi_filename1
     global simi_filename2
     
@@ -77,13 +80,13 @@ async def create_upload_files(request: Request, file1: UploadFile = File(...), f
     
 
 ####################################  Face Recognition endpoints  #################################################
-@app.get("/face_recognition/")
+@app.get("/face_recognition/", name="face_recognition_root")
 async def face_recognition_root(request: Request):
     return templates.TemplateResponse("face_recognition.html", {'request': request,})
 
 
-@app.post("/predict_face_recognition/")
-async def create_upload_files(request: Request, file3: UploadFile = File(...)):
+@app.post("/predict_face_recognition/", name="predict_face_recognition")
+async def predict_face_recognition(request: Request, file3: UploadFile = File(...)):
     global face_rec_filename
     
     if 'image' in file3.content_type:
@@ -104,13 +107,13 @@ async def create_upload_files(request: Request, file3: UploadFile = File(...)):
 
 
 ####################################  Expresion Recognition endpoints  #################################################
-@app.get("/expr_recognition/")
+@app.get("/expr_recognition/", name="expr_recognition_root")
 async def expr_recognition_root(request: Request):
     return templates.TemplateResponse("expr_recognition.html", {'request': request,})
 
 
-@app.post("/predict_expr_recognition/")
-async def create_upload_files(request: Request, file4: UploadFile = File(...)):
+@app.post("/predict_expr_recognition/", name="predict_expr_recognition")
+async def predict_expr_recognition(request: Request, file4: UploadFile = File(...)):
     global expr_rec_filename
     
     if 'image' in file4.content_type:
@@ -141,6 +144,11 @@ if settings.BACKEND_CORS_ORIGINS:
         allow_headers=["*"],
     )
 
+# Add middleware to handle proxy headers for HTTPS
+# Only enable HTTPS redirect in production (Hugging Face Spaces)
+if os.getenv("SPACE_ID"):  # Hugging Face Spaces sets this env var
+    app.add_middleware(HTTPSRedirectMiddleware)
+
 
 # Start app
 if __name__ == "__main__":

app/templates/expr_recognition.html

@@ -14,7 +14,7 @@
         <ul>
             <!li>
             <br>
-            <form action="/predict_expr_recognition/" enctype="multipart/form-data" method="post">
+            <form action="{{ url_for('predict_expr_recognition') }}" enctype="multipart/form-data" method="post">
                 <span style="font-weight:bold;font-family:sans-serif">Upload Image:</span> <br><br>
                 <input name="file4" type="file" onchange="readURL(this);" />
                 <br><br><br>
@@ -22,7 +22,7 @@
             </form>
             <!/li>
             <br><br>
-            <form action="/" method="get">
+            <form action="{{ url_for('root') }}" method="get">
                 <button type="submit">Home</button>
             </form>
         </ul>

app/templates/face_recognition.html

@@ -14,7 +14,7 @@
         <ul>
             <!li>
             <br>
-            <form action="/predict_face_recognition/" enctype="multipart/form-data" method="post">
+            <form action="{{ url_for('predict_face_recognition') }}" enctype="multipart/form-data" method="post">
                 <span style="font-weight:bold;font-family:sans-serif">Upload Image:</span> <br><br>
                 <input name="file3" type="file" onchange="readURL(this);" />
                 <br><br><br>
@@ -22,7 +22,7 @@
             </form>
             <!/li>
             <br><br>
-            <form action="/" method="get">
+            <form action="{{ url_for('root') }}" method="get">
                 <button type="submit">Home</button>
             </form>
         </ul>

app/templates/predict_expr_recognition.html

@@ -24,11 +24,11 @@
               </center>
             </p>
             <br>
-            <form action="/expr_recognition/" method="get">
+            <form action="{{ url_for('expr_recognition_root') }}" method="get">
                 <center><button type="submit">Check Another Input</button></center>
             </form>
             <br>
-            <form action="/" method="get">
+            <form action="{{ url_for('root') }}" method="get">
                 <center><button type="submit">Home</button></center>
             </form>
         </fieldset>

app/templates/predict_face_recognition.html

@@ -24,11 +24,11 @@
               </center>
             </p>
             <br>
-            <form action="/face_recognition/" method="get">
+            <form action="{{ url_for('face_recognition_root') }}" method="get">
                 <center><button type="submit">Check Another Input</button></center>
             </form>
             <br>
-            <form action="/" method="get">
+            <form action="{{ url_for('root') }}" method="get">
                 <center><button type="submit">Home</button></center>
             </form>
         </fieldset>

app/templates/predict_similarity.html

@@ -25,11 +25,11 @@
               </center>
             </p>
             <br>
-            <form action="/similarity/" method="get">
+            <form action="{{ url_for('similarity_root') }}" method="get">
                 <center><button type="submit">Check Another Input</button></center>
             </form>
             <br>
-            <form action="/" method="get">
+            <form action="{{ url_for('root') }}" method="get">
                 <center><button type="submit">Home</button></center>
             </form>
         </fieldset>

app/templates/similarity.html

@@ -14,7 +14,7 @@
         <ul>
             <!li>
             <br>
-            <form action="/predict_similarity/" enctype="multipart/form-data" method="post">
+            <form action="{{ url_for('predict_similarity') }}" enctype="multipart/form-data" method="post">
                 <span style="font-weight:bold;font-family:sans-serif">Upload First Image:</span> <br><br>
                 <input name="file1" type="file" onchange="readURL(this);" />
                 <br><br><br>
@@ -25,7 +25,7 @@
             </form>
             <!/li>
             <br><br>
-            <form action="/" method="get">
+            <form action="{{ url_for('root') }}" method="get">
                 <button type="submit">Home</button>
             </form>
         </ul>