Update FastAPI app and templates for Hugging Face Space

app/main.py

@@ -1,137 +1,114 @@
 import sys
 from pathlib import Path
 sys.path.append(str(Path(__file__).resolve().parent.parent))
-#print(sys.path)
-from typing import Any
 
-from fastapi import FastAPI, Request, APIRouter, File, UploadFile
+from fastapi import FastAPI, Request, File, UploadFile
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from fastapi.middleware.cors import CORSMiddleware
+
 from app.config import settings
-from app import __version__
 from app.Hackathon_setup import face_recognition, exp_recognition
 
 import numpy as np
 from PIL import Image
 
-
 app = FastAPI(
     title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
 )
 
-# To store files uploaded by users
+# Mount static folder
 app.mount("/static", StaticFiles(directory="app/static"), name="static")
 
-# To access Templates directory
+# Templates folder
 templates = Jinja2Templates(directory="app/templates")
 
-simi_filename1 = None
-simi_filename2 = None
-face_rec_filename = None
-expr_rec_filename = None
-
-
-####################################  Home Page endpoints  #################################################
+#################################### Home Page ####################################
 @app.get("/")
 async def root(request: Request):
-    return templates.TemplateResponse("index.html", {'request': request,})
+    return templates.TemplateResponse("index.html", {"request": request})
 
-
-####################################  Face Similarity endpoints  #################################################
+#################################### Face Similarity ####################################
 @app.get("/similarity/")
 async def similarity_root(request: Request):
-    return templates.TemplateResponse("similarity.html", {'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(...)):
-    global simi_filename1
-    global simi_filename2
-    
-    if 'image' in file1.content_type:
-        contents = await file1.read()
-        simi_filename1 = 'app/static/' + file1.filename
-        with open(simi_filename1, 'wb') as f:
-            f.write(contents)
-    
-    if 'image' in file2.content_type:
-        contents = await file2.read()
-        simi_filename2 = 'app/static/' + file2.filename
-        with open(simi_filename2, 'wb') as f:
-            f.write(contents)
+async def predict_similarity(request: Request, file1: UploadFile = File(...), file2: UploadFile = File(...)):
     
-    img1 = Image.open(simi_filename1)
-    img1 =  np.array(img1).reshape(img1.size[1], img1.size[0], 3).astype(np.uint8)
-    
-    img2 = Image.open(simi_filename2)
-    img2 =  np.array(img2).reshape(img2.size[1], img2.size[0], 3).astype(np.uint8)
+    # Save uploaded images
+    path1 = f'app/static/{file1.filename}'
+    path2 = f'app/static/{file2.filename}'
     
+    contents1 = await file1.read()
+    with open(path1, 'wb') as f:
+        f.write(contents1)
+        
+    contents2 = await file2.read()
+    with open(path2, 'wb') as f:
+        f.write(contents2)
+
+    # Open images as RGB
+    img1 = np.array(Image.open(path1).convert("RGB"))
+    img2 = np.array(Image.open(path2).convert("RGB"))
+
+    # Compute similarity
     result = face_recognition.get_similarity(img1, img2)
-    #print(result)
     
-    return templates.TemplateResponse("predict_similarity.html", {"request": request,
-                                                       "result": np.round(result, 3),
-                                                       "simi_filename1": '../static/'+file1.filename,
-                                                       "simi_filename2": '../static/'+file2.filename,})
-    
-
-####################################  Face Recognition endpoints  #################################################
+    return templates.TemplateResponse("predict_similarity.html", {
+        "request": request,
+        "result": np.round(result, 3),
+        "simi_filename1": f"/static/{file1.filename}",
+        "simi_filename2": f"/static/{file2.filename}"
+    })
+
+#################################### Face Recognition ####################################
 @app.get("/face_recognition/")
 async def face_recognition_root(request: Request):
-    return templates.TemplateResponse("face_recognition.html", {'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(...)):
-    global face_rec_filename
-    
-    if 'image' in file3.content_type:
-        contents = await file3.read()
-        face_rec_filename = 'app/static/' + file3.filename
-        with open(face_rec_filename, 'wb') as f:
-            f.write(contents)
-    
-    img1 = Image.open(face_rec_filename)
-    img1 =  np.array(img1).reshape(img1.size[1], img1.size[0], 3).astype(np.uint8)
-        
-    result = face_recognition.get_face_class(img1)
-    print(result)
-    
-    return templates.TemplateResponse("predict_face_recognition.html", {"request": request,
-                                                       "result": result,
-                                                       "face_rec_filename": '../static/'+file3.filename,})
+async def predict_face_recognition(request: Request, file3: UploadFile = File(...)):
 
+    path = f'app/static/{file3.filename}'
+    contents = await file3.read()
+    with open(path, 'wb') as f:
+        f.write(contents)
 
-####################################  Expresion Recognition endpoints  #################################################
+    img = np.array(Image.open(path).convert("RGB"))
+
+    result = face_recognition.get_face_class(img)
+
+    return templates.TemplateResponse("predict_face_recognition.html", {
+        "request": request,
+        "result": result,
+        "face_rec_filename": f"/static/{file3.filename}"
+    })
+
+#################################### Expression Recognition ####################################
 @app.get("/expr_recognition/")
 async def expr_recognition_root(request: Request):
-    return templates.TemplateResponse("expr_recognition.html", {'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(...)):
-    global expr_rec_filename
-    
-    if 'image' in file4.content_type:
-        contents = await file4.read()
-        expr_rec_filename = 'app/static/' + file4.filename
-        with open(expr_rec_filename, 'wb') as f:
-            f.write(contents)
-    
-    img1 = Image.open(expr_rec_filename)
-    img1 =  np.array(img1).reshape(img1.size[1], img1.size[0], 3).astype(np.uint8)
-        
-    result = exp_recognition.get_expression(img1)
-    print(result)
-    
-    return templates.TemplateResponse("predict_expr_recognition.html", {"request": request,
-                                                       "result": result,
-                                                       "expr_rec_filename": '../static/'+file4.filename,})
+async def predict_expr_recognition(request: Request, file4: UploadFile = File(...)):
 
+    path = f'app/static/{file4.filename}'
+    contents = await file4.read()
+    with open(path, 'wb') as f:
+        f.write(contents)
 
+    img = np.array(Image.open(path).convert("RGB"))
 
-# Set all CORS enabled origins
+    result = exp_recognition.get_expression(img)
+
+    return templates.TemplateResponse("predict_expr_recognition.html", {
+        "request": request,
+        "result": result,
+        "expr_rec_filename": f"/static/{file4.filename}"
+    })
+
+#################################### CORS Middleware ####################################
 if settings.BACKEND_CORS_ORIGINS:
     app.add_middleware(
         CORSMiddleware,
@@ -141,8 +118,7 @@ if settings.BACKEND_CORS_ORIGINS:
         allow_headers=["*"],
     )
 
-
-# Start app
+#################################### Run App ####################################
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=8001)

app/main_bkp.py

@@ -0,0 +1,148 @@
+import sys
+from pathlib import Path
+sys.path.append(str(Path(__file__).resolve().parent.parent))
+#print(sys.path)
+from typing import Any
+
+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 app.config import settings
+from app import __version__
+from app.Hackathon_setup import face_recognition, exp_recognition
+
+import numpy as np
+from PIL import Image
+
+
+app = FastAPI(
+    title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
+)
+
+# To store files uploaded by users
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
+
+# To access Templates directory
+templates = Jinja2Templates(directory="app/templates")
+
+simi_filename1 = None
+simi_filename2 = None
+face_rec_filename = None
+expr_rec_filename = None
+
+
+####################################  Home Page endpoints  #################################################
+@app.get("/")
+async def root(request: Request):
+    return templates.TemplateResponse("index.html", {'request': request,})
+
+
+####################################  Face Similarity endpoints  #################################################
+@app.get("/similarity/")
+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(...)):
+    global simi_filename1
+    global simi_filename2
+    
+    if 'image' in file1.content_type:
+        contents = await file1.read()
+        simi_filename1 = 'app/static/' + file1.filename
+        with open(simi_filename1, 'wb') as f:
+            f.write(contents)
+    
+    if 'image' in file2.content_type:
+        contents = await file2.read()
+        simi_filename2 = 'app/static/' + file2.filename
+        with open(simi_filename2, 'wb') as f:
+            f.write(contents)
+    
+    img1 = Image.open(simi_filename1)
+    img1 =  np.array(img1).reshape(img1.size[1], img1.size[0], 3).astype(np.uint8)
+    
+    img2 = Image.open(simi_filename2)
+    img2 =  np.array(img2).reshape(img2.size[1], img2.size[0], 3).astype(np.uint8)
+    
+    result = face_recognition.get_similarity(img1, img2)
+    #print(result)
+    
+    return templates.TemplateResponse("predict_similarity.html", {"request": request,
+                                                       "result": np.round(result, 3),
+                                                       "simi_filename1": '../static/'+file1.filename,
+                                                       "simi_filename2": '../static/'+file2.filename,})
+    
+
+####################################  Face Recognition endpoints  #################################################
+@app.get("/face_recognition/")
+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(...)):
+    global face_rec_filename
+    
+    if 'image' in file3.content_type:
+        contents = await file3.read()
+        face_rec_filename = 'app/static/' + file3.filename
+        with open(face_rec_filename, 'wb') as f:
+            f.write(contents)
+    
+    img1 = Image.open(face_rec_filename)
+    img1 =  np.array(img1).reshape(img1.size[1], img1.size[0], 3).astype(np.uint8)
+        
+    result = face_recognition.get_face_class(img1)
+    print(result)
+    
+    return templates.TemplateResponse("predict_face_recognition.html", {"request": request,
+                                                       "result": result,
+                                                       "face_rec_filename": '../static/'+file3.filename,})
+
+
+####################################  Expresion Recognition endpoints  #################################################
+@app.get("/expr_recognition/")
+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(...)):
+    global expr_rec_filename
+    
+    if 'image' in file4.content_type:
+        contents = await file4.read()
+        expr_rec_filename = 'app/static/' + file4.filename
+        with open(expr_rec_filename, 'wb') as f:
+            f.write(contents)
+    
+    img1 = Image.open(expr_rec_filename)
+    img1 =  np.array(img1).reshape(img1.size[1], img1.size[0], 3).astype(np.uint8)
+        
+    result = exp_recognition.get_expression(img1)
+    print(result)
+    
+    return templates.TemplateResponse("predict_expr_recognition.html", {"request": request,
+                                                       "result": result,
+                                                       "expr_rec_filename": '../static/'+file4.filename,})
+
+
+
+# Set all CORS enabled origins
+if settings.BACKEND_CORS_ORIGINS:
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=[str(origin) for origin in settings.BACKEND_CORS_ORIGINS],
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+
+
+# Start app
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8001)

app/templates/expr_recognition.html

@@ -1,31 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Index</title>
+    <title>Expression Recognition</title>
 </head>
 <body>
     <div>
-        <h1 style="background-color:LightGray;">
-            <center>Expression Recognition</center>
+        <h1 style="background-color:LightGray; text-align:center;">
+            Expression Recognition
         </h1>
     </div>
+
     <div>
         <fieldset>
-        <ul>
-            <!li>
-            <br>
             <form action="/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>
+                <label style="font-weight:bold;">Upload Image:</label><br><br>
+                <input name="file4" type="file" accept="image/*" required><br><br>
                 <button type="submit">Recognize Expression</button>
             </form>
-            <!/li>
-            <br><br>
+            <br>
             <form action="/" method="get">
                 <button type="submit">Home</button>
             </form>
-        </ul>
         </fieldset>
     </div>
 </body>

app/templates/expr_recognition_bkp.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Index</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Expression Recognition</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+        <ul>
+            <!li>
+            <br>
+            <form action="/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>
+                <button type="submit">Recognize Expression</button>
+            </form>
+            <!/li>
+            <br><br>
+            <form action="/" method="get">
+                <button type="submit">Home</button>
+            </form>
+        </ul>
+        </fieldset>
+    </div>
+</body>
+</html>

app/templates/face_recognition.html

@@ -1,31 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Index</title>
+    <title>Face Recognition</title>
 </head>
 <body>
     <div>
-        <h1 style="background-color:LightGray;">
-            <center>Face Recognition</center>
+        <h1 style="background-color:LightGray; text-align:center;">
+            Face Recognition
         </h1>
     </div>
+
     <div>
         <fieldset>
-        <ul>
-            <!li>
-            <br>
             <form action="/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>
+                <label style="font-weight:bold;">Upload Image:</label><br><br>
+                <input name="file3" type="file" accept="image/*" required><br><br>
                 <button type="submit">Recognize Face</button>
             </form>
-            <!/li>
-            <br><br>
+            <br>
             <form action="/" method="get">
                 <button type="submit">Home</button>
             </form>
-        </ul>
         </fieldset>
     </div>
 </body>

app/templates/face_recognition_bkp.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Index</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Face Recognition</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+        <ul>
+            <!li>
+            <br>
+            <form action="/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>
+                <button type="submit">Recognize Face</button>
+            </form>
+            <!/li>
+            <br><br>
+            <form action="/" method="get">
+                <button type="submit">Home</button>
+            </form>
+        </ul>
+        </fieldset>
+    </div>
+</body>
+</html>

app/templates/index.html

@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Index</title>
+    <title>Recognition Application</title>
 </head>
 <body>
     <div>
-        <h1 style="background-color:LightGray;">
-            <center>Recognition Application</center>
+        <h1 style="background-color:LightGray; text-align:center;">
+            Recognition Application
         </h1>
     </div>
+
     <div>
         <fieldset>
-        <ul>
-            <li><span style="font-weight:bold;font-family:sans-serif">Select a task:</span> 
-            <br><br><br>
-            <form action="{{ url_for('similarity_root') }}"><button>Face Similarity</button></form>
-            <br><br>
-            <form action="{{ url_for('face_recognition_root') }}"><button>Face Recognition</button></form>
-            <br><br>
-            <form action="{{ url_for('expr_recognition_root') }}"><button>Expression Recognition</button></form>
+            <p style="font-weight:bold;">Select a task:</p>
             <br>
-            </li>
+            <form action="/similarity/">
+                <button type="submit">Face Similarity</button>
+            </form>
             <br>
-        </ul>
+            <form action="/face_recognition/">
+                <button type="submit">Face Recognition</button>
+            </form>
+            <br>
+            <form action="/expr_recognition/">
+                <button type="submit">Expression Recognition</button>
+            </form>
         </fieldset>
     </div>
 </body>

app/templates/index_bkp.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Index</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Recognition Application</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+        <ul>
+            <li><span style="font-weight:bold;font-family:sans-serif">Select a task:</span> 
+            <br><br><br>
+            <form action="{{ url_for('similarity_root') }}"><button>Face Similarity</button></form>
+            <br><br>
+            <form action="{{ url_for('face_recognition_root') }}"><button>Face Recognition</button></form>
+            <br><br>
+            <form action="{{ url_for('expr_recognition_root') }}"><button>Expression Recognition</button></form>
+            <br>
+            </li>
+            <br>
+        </ul>
+        </fieldset>
+    </div>
+</body>
+</html>

app/templates/predict_expr_recognition.html

@@ -5,33 +5,34 @@
 </head>
 <body>
     <div>
-        <h1 style="background-color:LightGray;">
-            <center>Expression Recognition</center>
+        <h1 style="background-color:LightGray; text-align:center;">
+            Expression Recognition
         </h1>
     </div>
+
     <div>
         <fieldset>
-            <h2>
-                <center>
-                    <span style="font-weight:bold;font-family:sans-serif">Prediction: </span> 
-                    <span style="font-weight:bold;color:blue"> {{result}}</span>
-                </center>
+            <h2 style="text-align:center;">
+                <span style="font-weight:bold;">Prediction:</span> 
+                <span style="font-weight:bold;color:blue;">{{ result }}</span>
             </h2>
-            <h3><center><span style="font-weight:bold;font-family:sans-serif">Input image:</span></Input></center></h3> 
-            <p>
-              <center>
-              <img src="{{expr_rec_filename}}" alt={{expr_rec_filename1}} width='150' height='150'>
-              </center>
+
+            <h3 style="text-align:center;">
+                <span style="font-weight:bold;">Input image:</span>
+            </h3> 
+
+            <p style="text-align:center;">
+                <img src="{{ expr_rec_filename }}" alt="Input Image" width="150" height="150">
             </p>
-            <br>
-            <form action="/expr_recognition/" method="get">
-                <center><button type="submit">Check Another Input</button></center>
+
+            <form action="/expr_recognition/" method="get" style="text-align:center;">
+                <button type="submit">Check Another Input</button>
             </form>
             <br>
-            <form action="/" method="get">
-                <center><button type="submit">Home</button></center>
+            <form action="/" method="get" style="text-align:center;">
+                <button type="submit">Home</button>
             </form>
         </fieldset>
     </div>
 </body>
-</html>
+</html>

app/templates/predict_expr_recognition_bkp.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Predict</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Expression Recognition</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+            <h2>
+                <center>
+                    <span style="font-weight:bold;font-family:sans-serif">Prediction: </span> 
+                    <span style="font-weight:bold;color:blue"> {{result}}</span>
+                </center>
+            </h2>
+            <h3><center><span style="font-weight:bold;font-family:sans-serif">Input image:</span></Input></center></h3> 
+            <p>
+              <center>
+              <img src="{{expr_rec_filename}}" alt={{expr_rec_filename1}} width='150' height='150'>
+              </center>
+            </p>
+            <br>
+            <form action="/expr_recognition/" method="get">
+                <center><button type="submit">Check Another Input</button></center>
+            </form>
+            <br>
+            <form action="/" method="get">
+                <center><button type="submit">Home</button></center>
+            </form>
+        </fieldset>
+    </div>
+</body>
+</html>

app/templates/predict_face_recognition.html

@@ -5,33 +5,34 @@
 </head>
 <body>
     <div>
-        <h1 style="background-color:LightGray;">
-            <center>Face Recognition</center>
+        <h1 style="background-color:LightGray; text-align:center;">
+            Face Recognition
         </h1>
     </div>
+
     <div>
         <fieldset>
-            <h2>
-                <center>
-                    <span style="font-weight:bold;font-family:sans-serif">Prediction: </span> 
-                    <span style="font-weight:bold;color:blue"> {{result}}</span>
-                </center>
+            <h2 style="text-align:center;">
+                <span style="font-weight:bold;">Prediction:</span> 
+                <span style="font-weight:bold;color:blue;">{{ result }}</span>
             </h2>
-            <h3><center><span style="font-weight:bold;font-family:sans-serif">Input image:</span></Input></center></h3> 
-            <p>
-              <center>
-              <img src="{{face_rec_filename}}" alt={{face_rec_filename1}} width='150' height='150'>
-              </center>
+
+            <h3 style="text-align:center;">
+                <span style="font-weight:bold;">Input image:</span>
+            </h3> 
+
+            <p style="text-align:center;">
+                <img src="{{ face_rec_filename }}" alt="Input Image" width="150" height="150">
             </p>
-            <br>
-            <form action="/face_recognition/" method="get">
-                <center><button type="submit">Check Another Input</button></center>
+
+            <form action="/face_recognition/" method="get" style="text-align:center;">
+                <button type="submit">Check Another Input</button>
             </form>
             <br>
-            <form action="/" method="get">
-                <center><button type="submit">Home</button></center>
+            <form action="/" method="get" style="text-align:center;">
+                <button type="submit">Home</button>
             </form>
         </fieldset>
     </div>
 </body>
-</html>
+</html>

app/templates/predict_face_recognition_bkp.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Predict</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Face Recognition</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+            <h2>
+                <center>
+                    <span style="font-weight:bold;font-family:sans-serif">Prediction: </span> 
+                    <span style="font-weight:bold;color:blue"> {{result}}</span>
+                </center>
+            </h2>
+            <h3><center><span style="font-weight:bold;font-family:sans-serif">Input image:</span></Input></center></h3> 
+            <p>
+              <center>
+              <img src="{{face_rec_filename}}" alt={{face_rec_filename1}} width='150' height='150'>
+              </center>
+            </p>
+            <br>
+            <form action="/face_recognition/" method="get">
+                <center><button type="submit">Check Another Input</button></center>
+            </form>
+            <br>
+            <form action="/" method="get">
+                <center><button type="submit">Home</button></center>
+            </form>
+        </fieldset>
+    </div>
+</body>
+</html>

app/templates/predict_similarity.html

@@ -5,34 +5,35 @@
 </head>
 <body>
     <div>
-        <h1 style="background-color:LightGray;">
-            <center>Face Similarity</center>
+        <h1 style="background-color:LightGray; text-align:center;">
+            Face Similarity
         </h1>
     </div>
+
     <div>
         <fieldset>
-            <h2>
-                <center>
-                    <span style="font-weight:bold;font-family:sans-serif">Dissimilarity:</span> 
-                    <span style="font-weight:bold;color:blue"> {{result}}</span>
-                </center>
+            <h2 style="text-align:center;">
+                <span style="font-weight:bold;">Dissimilarity:</span> 
+                <span style="font-weight:bold;color:blue;">{{ result }}</span>
             </h2>
-            <h3><center><span style="font-weight:bold;font-family:sans-serif">Input images:</span></Input></center></h3> 
-            <p>
-              <center>
-              <img src="{{simi_filename1}}" alt={{simi_filename1}} width='150' height='150'>
-              <img src="{{simi_filename2}}" alt={{simi_filename2}} width='150' height='150'>
-              </center>
+
+            <h3 style="text-align:center;">
+                <span style="font-weight:bold;">Input images:</span>
+            </h3> 
+
+            <p style="text-align:center;">
+                <img src="{{ simi_filename1 }}" alt="First Image" width="150" height="150">
+                <img src="{{ simi_filename2 }}" alt="Second Image" width="150" height="150">
             </p>
-            <br>
-            <form action="/similarity/" method="get">
-                <center><button type="submit">Check Another Input</button></center>
+
+            <form action="/similarity/" method="get" style="text-align:center;">
+                <button type="submit">Check Another Input</button>
             </form>
             <br>
-            <form action="/" method="get">
-                <center><button type="submit">Home</button></center>
+            <form action="/" method="get" style="text-align:center;">
+                <button type="submit">Home</button>
             </form>
         </fieldset>
     </div>
 </body>
-</html>
+</html>

app/templates/predict_similarity_bkp.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Predict</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Face Similarity</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+            <h2>
+                <center>
+                    <span style="font-weight:bold;font-family:sans-serif">Dissimilarity:</span> 
+                    <span style="font-weight:bold;color:blue"> {{result}}</span>
+                </center>
+            </h2>
+            <h3><center><span style="font-weight:bold;font-family:sans-serif">Input images:</span></Input></center></h3> 
+            <p>
+              <center>
+              <img src="{{simi_filename1}}" alt={{simi_filename1}} width='150' height='150'>
+              <img src="{{simi_filename2}}" alt={{simi_filename2}} width='150' height='150'>
+              </center>
+            </p>
+            <br>
+            <form action="/similarity/" method="get">
+                <center><button type="submit">Check Another Input</button></center>
+            </form>
+            <br>
+            <form action="/" method="get">
+                <center><button type="submit">Home</button></center>
+            </form>
+        </fieldset>
+    </div>
+</body>
+</html>

app/templates/similarity_bkp.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Index</title>
+</head>
+<body>
+    <div>
+        <h1 style="background-color:LightGray;">
+            <center>Face Similarity</center>
+        </h1>
+    </div>
+    <div>
+        <fieldset>
+        <ul>
+            <!li>
+            <br>
+            <form action="/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>
+                <span style="font-weight:bold;font-family:sans-serif">Upload Second Image:</span> <br><br>
+                <input name="file2" type="file" onchange="readURL(this);" />
+                <br><br><br><br>
+                <button type="submit">Check Similarity</button>
+            </form>
+            <!/li>
+            <br><br>
+            <form action="/" method="get">
+                <button type="submit">Home</button>
+            </form>
+        </ul>
+        </fieldset>
+    </div>
+</body>
+</html>