Added batch processing

Layoutlmv3_inference/annotate_image.py

@@ -0,0 +1,56 @@
+import os
+from PIL import Image, ImageDraw, ImageFont
+from .utils import image_label_2_color
+
+
+def get_flattened_output(docs):
+  print("Running Flattened Output")
+  flattened_output = []
+  annotation_key = 'output'
+  for doc in docs:
+    flattened_output_item = {annotation_key: []}
+    doc_annotation = doc[annotation_key]
+    for i, span in enumerate(doc_annotation):
+      if len(span['words']) > 1:
+        for span_chunk in span['words']:
+          flattened_output_item[annotation_key].append(
+              {
+                  'label': span['label'],
+                  'text': span_chunk['text'],
+                  'words': [span_chunk]
+              }
+          )
+          
+      else:
+        flattened_output_item[annotation_key].append(span)
+    flattened_output.append(flattened_output_item)
+  return flattened_output
+
+
+def annotate_image(image_path, annotation_object):
+  print("Annotating Images")
+  img = None
+  image = Image.open(image_path).convert('RGBA')
+  tmp = image.copy()
+  label2color = image_label_2_color(annotation_object)
+  overlay = Image.new('RGBA', tmp.size, (0, 0, 0)+(0,))
+  draw = ImageDraw.Draw(overlay)
+  font = ImageFont.load_default()
+
+  predictions = [span['label'] for span in annotation_object['output']]
+  boxes = [span['words'][0]['box'] for span in annotation_object['output']]
+  for prediction, box in zip(predictions, boxes):
+      draw.rectangle(box, outline=label2color[prediction],
+                     width=3, fill=label2color[prediction]+(int(255*0.33),))
+      draw.text((box[0] + 10, box[1] - 10), text=prediction,
+                fill=label2color[prediction], font=font)
+
+  img = Image.alpha_composite(tmp, overlay)
+  img = img.convert("RGB")
+
+  image_name = os.path.basename(image_path)
+  image_name = image_name[:image_name.find('.')]
+  output_folder = 'inferenced/'
+  os.makedirs(output_folder, exist_ok=True)
+
+  img.save(os.path.join(output_folder, f'{image_name}_inference.jpg'))

Layoutlmv3_inference/inference_handler.py

@@ -0,0 +1,224 @@
+from .utils import load_model,load_processor,normalize_box,compare_boxes,adjacent
+from .annotate_image import get_flattened_output,annotate_image
+from PIL import Image,ImageDraw, ImageFont
+import logging
+import torch
+import json
+import os
+
+
+logger = logging.getLogger(__name__)
+
+class ModelHandler(object):
+    def __init__(self):
+        self.model = None
+        self.model_dir = None
+        self.device = 'cpu'
+        self.error = None
+        self.initialized = False
+        self._raw_input_data = None
+        self._processed_data = None
+        self._images_size = None
+        self.counter = 0
+
+
+    def initialize(self, context):
+        try:
+            logger.info("Loading transformer model")
+            self._context = context
+            properties = self._context
+            self.model_dir = properties.get("model_dir")
+            self.model = self.load(self.model_dir)
+            self.initialized = True
+        except Exception as e:
+            logger.error(f"Error initializing model: {str(e)}")
+            self.error = str(e)
+
+    def preprocess(self, batch):
+        try:
+            inference_dict = batch
+            self._raw_input_data = inference_dict
+            processor = load_processor()
+            images = [Image.open(path).convert("RGB")
+                      for path in inference_dict['image_path']]
+            self._images_size = [img.size for img in images]
+            words = inference_dict['words']
+            boxes = [[normalize_box(box, images[i].size[0], images[i].size[1])
+                      for box in doc] for i, doc in enumerate(inference_dict['bboxes'])]
+            encoded_inputs = processor(
+                images, words, boxes=boxes, return_tensors="pt", padding="max_length", truncation=True)
+            self._processed_data = encoded_inputs
+            return encoded_inputs
+        except Exception as e:
+            logger.error(f"Error in preprocessing: {str(e)}")
+            self.error = str(e)
+            return None
+
+    def load(self, model_dir):
+        try:
+            model = load_model(model_dir)
+            return model
+        except Exception as e:
+            logger.error(f"Error loading LayoutLMv3 model: {str(e)}")
+            self.error = str(e)
+            return None
+
+    def inference(self, model_input):
+        try:
+            with torch.no_grad():
+                inference_outputs = self.model(**model_input)
+                predictions = inference_outputs.logits.argmax(-1).tolist()
+            results = []
+            for i in range(len(predictions)):
+                tmp = dict()
+                tmp[f'output_{i}'] = predictions[i]
+                results.append(tmp)
+            return [results]
+        except Exception as e:
+            logger.error(f"Error in inference: {str(e)}")
+            self.error = str(e)
+            return None
+
+    def postprocess(self, inference_output):
+        try:
+            docs = []
+            k = 0
+            for page, doc_words in enumerate(self._raw_input_data['words']):
+                doc_list = []
+                width, height = self._images_size[page]
+                for i, doc_word in enumerate(doc_words, start=0):
+                    word_tagging = None
+                    word_labels = []
+                    word = dict()
+                    word['id'] = k
+                    k += 1
+                    word['text'] = doc_word
+                    word['pageNum'] = page + 1
+                    word['box'] = self._raw_input_data['bboxes'][page][i]
+                    _normalized_box = normalize_box(
+                        self._raw_input_data['bboxes'][page][i], width, height)
+                    for j, box in enumerate(self._processed_data['bbox'].tolist()[page]):
+                        if compare_boxes(box, _normalized_box):
+                            if self.model.config.id2label[inference_output[0][page][f'output_{page}'][j]] != 'O':
+                                word_labels.append(
+                                    self.model.config.id2label[inference_output[0][page][f'output_{page}'][j]][2:])
+                            else:
+                                word_labels.append('other')
+                    if word_labels != []:
+                        word_tagging = word_labels[0] if word_labels[0] != 'other' else word_labels[-1]
+                    else:
+                        word_tagging = 'other'
+                    word['label'] = word_tagging
+                    word['pageSize'] = {'width': width, 'height': height}
+                    if word['label'] != 'other':
+                        doc_list.append(word)
+                spans = []
+                def adjacents(entity): return [
+                    adj for adj in doc_list if adjacent(entity, adj)]
+                output_test_tmp = doc_list[:]
+                for entity in doc_list:
+                    if adjacents(entity) == []:
+                        spans.append([entity])
+                        output_test_tmp.remove(entity)
+
+                while output_test_tmp != []:
+                    span = [output_test_tmp[0]]
+                    output_test_tmp = output_test_tmp[1:]
+                    while output_test_tmp != [] and adjacent(span[-1], output_test_tmp[0]):
+                        span.append(output_test_tmp[0])
+                        output_test_tmp.remove(output_test_tmp[0])
+                    spans.append(span)
+
+                output_spans = []
+                for span in spans:
+                    if len(span) == 1:
+                        output_span = {"text": span[0]['text'],
+                                    "label": span[0]['label'],
+                                    "words": [{
+                                        'id': span[0]['id'],
+                                        'box': span[0]['box'],
+                                        'text': span[0]['text']
+                                    }],
+                                    }
+                    else:
+                        output_span = {"text": ' '.join([entity['text'] for entity in span]),
+                                    "label": span[0]['label'],
+                                    "words": [{
+                                        'id': entity['id'],
+                                        'box': entity['box'],
+                                        'text': entity['text']
+                                    } for entity in span]
+
+                                    }
+                    output_spans.append(output_span)
+                docs.append({f'output': output_spans})
+            return [json.dumps(docs, ensure_ascii=False)]
+
+        except Exception as e:
+            logger.error(f"Error in postprocessing: {str(e)}")
+            self.error = str(e)
+            return None
+
+
+    def handle(self, data, context):
+        """
+        Call preprocess, inference, and post-process functions
+        :param data: input data
+        :param context: mms context
+        """
+        try:
+            if not self.initialized:
+                self.initialize(context)
+
+            if data is None:
+                return None
+
+            model_input = self.preprocess(data)
+            if model_input is None:
+                return None
+
+            model_out = self.inference(model_input)
+            if model_out is None:
+                return None
+
+            inference_out = self.postprocess(model_out)[0]
+
+            # # Write the original inference output to a JSON file
+            # with open('temp/LayoutlMV3InferenceOutput.json', 'w') as inf_out:
+            #     inf_out.write(inference_out)
+
+            # Load the original inference output from the JSON file
+            inference_out_list = json.loads(inference_out)
+            flattened_output_list = get_flattened_output(inference_out_list)
+            print('Ready for Annotation')
+            for i, flattened_output in enumerate(flattened_output_list):
+                annotate_image(data['image_path'][i], flattened_output)
+
+            # Create the labeled directory if it doesn't exist
+            labeled_dir = 'static/temp/labeled'
+            os.makedirs(labeled_dir, exist_ok=True)
+
+            # Loop through the list and create a new file for each JSON object
+            for index, output_json in enumerate(inference_out_list):
+                # Generate a filename based on the index
+                output_filename = os.path.join(labeled_dir, f'Output_{index}.json')
+                # Write the JSON object to the file
+                with open(output_filename, 'w') as output_file:
+                    json.dump(output_json, output_file)
+        
+        except Exception as e:
+            logger.error(f"Error handling request: {str(e)}")
+            self.error = str(e)
+
+                        
+_service = ModelHandler()
+
+
+def handle(data, context):
+    if not _service.initialized:
+        _service.initialize(context)
+
+    if data is None:
+        return None
+
+    return _service.handle(data, context)

Layoutlmv3_inference/ocr.py

@@ -0,0 +1,199 @@
+import os
+import pandas as pd
+import cv2
+import numpy as np
+import json
+import requests
+import traceback
+import tempfile
+
+from PIL import Image
+
+def preprocess_image(image_path, max_file_size_mb=1, target_file_size_mb=0.5):
+    try:
+        # Read the image
+        image = cv2.imread(image_path)
+        # Enhance text
+        enhanced = enhance_txt(image)
+
+        # Save the enhanced image to a temporary file
+        temp_file_path = tempfile.NamedTemporaryFile(suffix='.jpg').name
+        cv2.imwrite(temp_file_path, enhanced)
+
+        # Check file size of the temporary file
+        file_size_mb = os.path.getsize(temp_file_path) / (1024 * 1024)  # Convert to megabytes
+
+        while file_size_mb > max_file_size_mb:
+            print(f"File size ({file_size_mb} MB) exceeds the maximum allowed size ({max_file_size_mb} MB). Resizing the image.")
+            ratio = np.sqrt(target_file_size_mb / file_size_mb)
+            new_width = int(image.shape[1] * ratio)
+            new_height = int(image.shape[0] * ratio)
+
+            # Resize the image
+            enhanced = cv2.resize(enhanced, (new_width, new_height))
+
+            # Save the resized image to a temporary file
+            temp_file_path = tempfile.NamedTemporaryFile(suffix='.jpg').name
+            cv2.imwrite(temp_file_path, enhanced)
+
+            # Update file size
+            file_size_mb = os.path.getsize(temp_file_path) / (1024 * 1024)
+            print(f"New file size: ({file_size_mb} MB)")
+
+        # Return the final resized image
+        image_resized = cv2.imread(temp_file_path)
+        return image_resized
+
+    except Exception as e:
+        print(f"An error occurred in preprocess_image: {str(e)}")
+        return None
+
+
+def enhance_txt(img, intensity_increase=20, bilateral_filter_diameter=9, bilateral_filter_sigma_color=75, bilateral_filter_sigma_space=75):
+    # Get the width and height of the image
+    w = img.shape[1]
+    h = img.shape[0]
+    w1 = int(w * 0.05)
+    w2 = int(w * 0.95)
+    h1 = int(h * 0.05)
+    h2 = int(h * 0.95)
+    ROI = img[h1:h2, w1:w2]  # 95% of the center of the image
+    threshold = np.mean(ROI) * 0.88  # % of average brightness
+
+    # Convert image to grayscale
+    grayscale_img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+
+    # Apply Gaussian blur
+    blurred = cv2.GaussianBlur(grayscale_img, (1, 1), 0)
+
+    edged = 255 - cv2.Canny(blurred, 100, 150, apertureSize=7)
+
+    # Increase intensity by adding a constant value
+    img = np.clip(img + intensity_increase, 0, 255).astype(np.uint8)
+
+    # Apply bilateral filter to reduce noise
+    img = cv2.bilateralFilter(img, bilateral_filter_diameter, bilateral_filter_sigma_color, bilateral_filter_sigma_space)
+
+    _, binary = cv2.threshold(blurred, threshold, 255, cv2.THRESH_BINARY)
+    return binary
+
+
+def run_tesseract_on_preprocessed_image(preprocessed_image, image_path):
+    try:
+        image_name = os.path.basename(image_path)
+        image_name = image_name[:image_name.find('.')]
+
+        # Create the "temp" folder if it doesn't exist
+        temp_folder = "static/temp"
+        if not os.path.exists(temp_folder):
+            os.makedirs(temp_folder)
+
+        # Define the OCR API endpoint
+        url = "https://api.ocr.space/parse/image"
+
+        # Define the API key and the language
+        api_key = "K88232854988957"  # Replace with your actual OCR Space API key
+        language = "eng"
+
+        # Save the preprocessed image
+        cv2.imwrite(os.path.join(temp_folder, f"{image_name}_preprocessed.jpg"), preprocessed_image)
+
+        # Open the preprocessed image file as binary
+        with open(os.path.join(temp_folder, f"{image_name}_preprocessed.jpg"), "rb") as f:
+            # Define the payload for the API request
+            payload = {
+                "apikey": api_key,
+                "language": language,
+                "isOverlayRequired": True,
+                "OCREngine": 2
+            }
+            # Define the file parameter for the API request
+            file = {
+                "file": f
+            }
+            # Send the POST request to the OCR API
+            response = requests.post(url, data=payload, files=file)
+
+        # Check the status code of the response
+        if response.status_code == 200:
+            # Parse the JSON response
+            result = response.json()
+            print("---JSON file saved")
+            # Save the OCR result as JSON
+            with open(os.path.join(temp_folder, f"{image_name}_ocr.json"), 'w') as f:
+                json.dump(result, f)
+
+            return os.path.join(temp_folder, f"{image_name}_ocr.json")
+        else:
+            # Print the error message
+            print("Error: " + response.text)
+            return None
+
+    except Exception as e:
+        print(f"An error occurred during OCR request: {str(e)}")
+        return None
+
+def clean_tesseract_output(json_output_path):
+    try:
+        with open(json_output_path, 'r') as json_file:
+            data = json.load(json_file)
+
+        lines = data['ParsedResults'][0]['TextOverlay']['Lines']
+
+        words = []
+        for line in lines:
+            for word_info in line['Words']:
+                word = {}
+                origin_box = [
+                    word_info['Left'],
+                    word_info['Top'],
+                    word_info['Left'] + word_info['Width'],
+                    word_info['Top'] + word_info['Height']
+                ]
+
+                word['word_text'] = word_info['WordText']
+                word['word_box'] = origin_box
+                words.append(word)
+
+        return words
+    except (KeyError, IndexError, FileNotFoundError, json.JSONDecodeError) as e:
+        print(f"Error cleaning Tesseract output: {str(e)}")
+        return None
+
+def prepare_batch_for_inference(image_paths):
+    # print("my_function was called")
+    # traceback.print_stack()  # This will print the stack trace
+    print(f"Number of images to process: {len(image_paths)}")  # Print the total number of images to be processed
+    print("1. Preparing for Inference")
+    tsv_output_paths = []
+
+    inference_batch = dict()
+    print("2. Starting Preprocessing")
+    # Ensure that the image is only 1
+    for image_path in image_paths:
+        print(f"Processing the image: {image_path}")  # Print the image being processed
+        print("3. Preprocessing the Receipt")
+        preprocessed_image = preprocess_image(image_path)
+        if preprocessed_image is not None:
+            print("4. Preprocessing done. Running OCR")
+            json_output_path = run_tesseract_on_preprocessed_image(preprocessed_image, image_path)
+            print("5. OCR Complete")
+            if json_output_path:
+                tsv_output_paths.append(json_output_path)
+                
+    print("6. Preprocessing and OCR Done")
+    # clean_outputs is a list of lists
+    clean_outputs = [clean_tesseract_output(tsv_path) for tsv_path in tsv_output_paths]
+    print("7. Cleaned OCR output")
+    word_lists = [[word['word_text'] for word in clean_output] for clean_output in clean_outputs]
+    print("8. Word List Created")
+    boxes_lists = [[word['word_box'] for word in clean_output] for clean_output in clean_outputs]
+    print("9. Box List Created")
+    inference_batch = {
+        "image_path": image_paths,
+        "bboxes": boxes_lists,
+        "words": word_lists
+    }
+
+    print("10. Prepared for Inference Batch")
+    return inference_batch

Layoutlmv3_inference/utils.py

@@ -0,0 +1,50 @@
+import numpy as np
+from transformers import AutoModelForTokenClassification, AutoProcessor
+
+def normalize_box(bbox, width, height):
+    return [
+        int(bbox[0]*(1000/width)),
+        int(bbox[1]*(1000/height)),
+        int(bbox[2]*(1000/width)),
+        int(bbox[3]*(1000/height)),
+    ]
+
+def compare_boxes(b1, b2):
+    b1 = np.array([c for c in b1])
+    b2 = np.array([c for c in b2])
+    equal = np.array_equal(b1, b2)
+    return equal
+
+def unnormalize_box(bbox, width, height):
+    return [
+        width * (bbox[0] / 1000),
+        height * (bbox[1] / 1000),
+        width * (bbox[2] / 1000),
+        height * (bbox[3] / 1000),
+    ]
+
+def adjacent(w1, w2):
+  if w1['label'] == w2['label'] and abs(w1['id'] - w2['id']) == 1:
+    return True
+  return False
+
+def random_color():
+  return np.random.randint(0, 255, 3)
+
+def image_label_2_color(annotation):
+  if 'output' in annotation.keys():
+    image_labels = set([span['label'] for span in annotation['output']])
+    label2color = {f'{label}': (random_color()[0], random_color()[
+                                1], random_color()[2]) for label in image_labels}
+    return label2color
+  else:
+    raise ValueError('please use "output" as annotation key')
+
+def load_model(model_path):
+    model = AutoModelForTokenClassification.from_pretrained(model_path)
+    return model
+
+def load_processor():
+    processor = AutoProcessor.from_pretrained(
+        "microsoft/layoutlmv3-base", apply_ocr=False)
+    return processor

app.py

@@ -1,5 +1,4 @@
-import pytesseract
-from flask import Flask, request, render_template, jsonify, send_file, redirect, url_for, flash, send_from_directory
+from flask import Flask, request, render_template, jsonify, send_file, redirect, url_for, flash, send_from_directory, session
 from PIL import Image, ImageDraw
 import torch
 from transformers import LayoutLMv2ForTokenClassification, LayoutLMv3Tokenizer
@@ -19,7 +18,17 @@ import pandas as pd
 from itertools import zip_longest
 import inspect
 from threading import Lock
+import signal
+import shutil
+from datetime import datetime
 import zipfile
+# LLM
+import argparse
+from asyncio.log import logger
+from Layoutlmv3_inference.ocr import prepare_batch_for_inference
+from Layoutlmv3_inference.inference_handler import handle
+import logging
+import os
 import warnings
 
 # Ignore SourceChangeWarning
@@ -27,7 +36,7 @@ warnings.filterwarnings("ignore", category=DeprecationWarning)
 # warnings.filterwarnings("ignore", category=SourceChangeWarning)
 
 
-UPLOAD_FOLDER = 'static/uploads'
+UPLOAD_FOLDER = 'static/temp/uploads'
 if not os.path.exists(UPLOAD_FOLDER):
     os.makedirs(UPLOAD_FOLDER)
 
@@ -38,10 +47,32 @@ app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 app.config['SECRET_KEY'] = 'supersecretkey'
 
 
+
+# Added "temp" files cleaning for privacy and file managements.
+# All temporary files were moved to "output_folders" for review and recovery.
+# Moving of temp files were called at home page to ensure that new data were being supplied for extractor.
 @app.route('/', methods=['GET', 'POST'])
 def index():
-    return render_template('index.html')
+    try:
+        # Current date and time
+        now = datetime.now()
+        dt_string = now.strftime("%Y%m%d_%H%M%S")
+
+        # Source folders
+        temp_folder = r'static/temp'
+        inferenced_folder = r'inferenced'
+
+        # Destination folder path
+        destination_folder = os.path.join('output_folders', dt_string)  # Create a new folder with timestamp
 
+        # Move the temp and inferenced folders to the destination folder
+        shutil.move(temp_folder, destination_folder)
+        shutil.move(inferenced_folder, destination_folder)
+
+        return render_template('index.html', destination_folder=destination_folder)
+    except:
+        return render_template('index.html')
+    
 
 def allowed_file(filename):
     return '.' in filename and \
@@ -49,64 +80,102 @@ def allowed_file(filename):
 
 
 @app.route('/upload', methods=['GET', 'POST'])
-def upload_file():
+def upload_files():
+    UPLOAD_FOLDER = 'static/temp/uploads'
+    if not os.path.exists(UPLOAD_FOLDER):
+        os.makedirs(UPLOAD_FOLDER)
     if request.method == 'POST':
-        if 'file' not in request.files:
+        if 'files[]' not in request.files:
             resp = jsonify({'message' : 'No file part in the request'})
             resp.status_code = 400
             return resp
-        file = request.files['file']
-        if file.filename == '':
-            flash('No selected file')
-            return redirect(request.url)
-        if file and allowed_file(file.filename):
-            filename = secure_filename(file.filename)
-            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
-            return redirect(url_for('rename_file', old_name=filename))
+        files = request.files.getlist('files[]')
+        filenames = []
+        for file in files:
+            if file and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+                filenames.append(filename)
+        return redirect(url_for('predict_files', filenames=filenames))
     return render_template('index.html')
 
 
-def make_prediction(image_path):
+def make_predictions(image_paths):
+    temp = None
     try:
-        # temp = pathlib.PosixPath  # Save the original state
-        # pathlib.PosixPath = pathlib.WindowsPath  # Change to WindowsPath temporarily
-
+        # For Windows OS
+        temp = pathlib.PosixPath  # Save the original state
+        pathlib.PosixPath = pathlib.WindowsPath  # Change to WindowsPath temporarily
+        
         model_path = Path(r'model/export')
-
         learner = load_learner(model_path)
+        
+        predictions = []
 
-        # Open the image using fastai's open_image function
-        image = open_image(image_path)
+        for image_path in image_paths:
+            # Open the image using fastai's open_image function
+            image = open_image(image_path)
 
-        # Make a prediction
-        prediction_class, prediction_idx, probabilities = learner.predict(image)
+            # Make a prediction
+            prediction_class, prediction_idx, probabilities = learner.predict(image)
 
-        # If you want the predicted class as a string
-        predicted_class_str = str(prediction_class)
+            # If you want the predicted class as a string
+            predicted_class_str = str(prediction_class)
+            
+            predictions.append(predicted_class_str)
 
-        return predicted_class_str
+        return predictions
 
     except Exception as e:
-        return {"error": str(e)}
-    # finally:
-    #     pathlib.PosixPath = temp 
-
-
-@app.route('/rename/<old_name>', methods=['GET', 'POST'])
-def rename_file(old_name):
-    new_name = 'temp.jpg'
-    file_path = os.path.join(app.config['UPLOAD_FOLDER'], old_name)
-    new_file_path = os.path.join(app.config['UPLOAD_FOLDER'], new_name)
-
-    if os.path.exists(file_path):
-        shutil.move(file_path, new_file_path)
-
-        # Call make_prediction automatically
-        prediction_results = make_prediction(new_file_path)
-        prediction_result = str(prediction_results)
-        return render_template('extractor.html', uploaded_file=new_name, old_name=old_name, prediction_result=prediction_result)
-    else:
-        return 'File not found'
+        return {"error in make_predictions": str(e)}
+        
+    finally:
+        pathlib.PosixPath = temp 
+
+import copy
+@app.route('/predict/<filenames>', methods=['GET', 'POST'])
+def predict_files(filenames):
+    prediction_results = []
+    image_paths = eval(filenames)  # Convert the filenames string back to a list
+    
+    for filename in image_paths:
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        folder_path = UPLOAD_FOLDER
+        destination_folder = r'static/temp/img_display'
+        if not os.path.exists(destination_folder):
+            os.makedirs(destination_folder)
+
+        # Get a list of all files in the source folder
+        files = os.listdir(folder_path)
+
+        # Loop through each file and copy it to the destination folder
+        for file in files:
+            # Construct the full path of the source file
+            source_file_path = os.path.join(folder_path, file)
+            
+            # Construct the full path of the destination file
+            destination_file_path = os.path.join(destination_folder, file)
+            
+            # Copy the file to the destination folder
+            shutil.copy(source_file_path, destination_file_path)
+        
+        if os.path.exists(file_path):
+            # Call make_predictions automatically
+            prediction_result = make_predictions([file_path])  # Pass file_path as a list
+            prediction_results.extend(prediction_result)
+            
+            # Create a copy of prediction_results before deletion
+            prediction_results_copy = copy.deepcopy(prediction_results)
+            
+            if prediction_result[0] != 'non-receipt':  # Check if prediction is not 'non-receipt'
+                prediction_results.extend(prediction_result)  # Use extend to add elements of list to another list
+            else:
+                # Delete the image if it's predicted as non-receipt
+                os.remove(file_path)
+            print(image_paths)
+
+    return render_template('extractor.html', image_paths=image_paths, prediction_results = prediction_results, predictions=dict(zip(image_paths, prediction_results_copy)))
+
     
     
 @app.route('/get_inference_image')
@@ -115,119 +184,166 @@ def get_inference_image():
     inferenced_image = 'inferenced/temp_inference.jpg'
     return jsonify(updatedImagePath=inferenced_image), 200  # Return the image path with a 200 status code
     
-# Define a lock object
-inference_lock = Lock()
+
+def process_images(model_path: str, images_path: str) -> None:
+    try:
+        image_files = os.listdir(images_path)
+        images_path = [os.path.join(images_path, image_file) for image_file in image_files]
+        inference_batch = prepare_batch_for_inference(images_path)
+        context = {"model_dir": model_path}
+        handle(inference_batch, context)
+    except Exception as err:
+        os.makedirs('log', exist_ok=True)
+        logging.basicConfig(filename='log/error_output.log', level=logging.ERROR,
+                            format='%(asctime)s %(levelname)s %(name)s %(message)s')
+        logger = logging.getLogger(__name__)
+        logger.error(err)
 
 @app.route('/run_inference', methods=['GET'])
 def run_inference():
-    # print(f"run_inference was called from {inspect.stack()[1].filename} at line {inspect.stack()[1].lineno}")
-    if inference_lock.locked():
-        return '', 204  # Return an empty response with a 204 status code
-    
-    # Acquire the lock before starting the inference process
-    with inference_lock:
-        try:
-            model_path = r"model" # path to Layoutlmv3 model
-            images_path = r"static/uploads" # images folder
-            # Your inference process code here
-            subprocess.check_call([sys.executable, "static/inference/run_inference.py", "--model_path", model_path, "--images_path", images_path])
-            return redirect(url_for('create_csv'))
-        except Exception as e:
-            return jsonify({"error": str(e)})
-            
+    try:
+        model_path = r"model"
+        images_path = r"static/temp/uploads/"
+        process_images(model_path, images_path)
+        return redirect(url_for('create_csv'))
+    except Exception as err:
+        return f"Error processing images: {str(err)}", 500
+
+
+@app.route('/stop_inference', methods=['GET'])
+def stop_inference():
+    try:
+        # Get the process ID of the run_inference process
+        run_inference_pid = os.getpid()  # Assuming it's running in the same process
+
+        # Send the SIGTERM signal to gracefully terminate the process
+        os.kill(run_inference_pid, signal.SIGTERM)
+
+        return render_template('index.html')
+    except ProcessLookupError:
+        logging.warning("run_inference process not found.")
+    except Exception as err:
+        logging.error(f"Error terminating run_inference process: {err}")
 
 # Define a function to replace all symbols with periods
 def replace_symbols_with_period(value):
-    return re.sub(r'\W+', '.', str(value))
+    # return re.sub(r'\W+', '.', str(value))
+    return value.replace(',', '.')
+
+
+from itertools import zip_longest
+
 @app.route('/create_csv', methods=['GET'])
 def create_csv():
     try:
-        # Load JSON data from file
-        json_file_path = r"temp/LayoutlMV3InferenceOutput.json"  # path to JSON file
-        output_file_path = r"inferenced/output.csv"  # path to output CSV file
-
-        with open(json_file_path, 'r') as file:
-            data = json.load(file)
-
-        # Creating a dictionary to store labels and corresponding texts
-        label_texts = {}
-        for item in data:
-            for output_item in item['output']:
-                label = output_item['label']
-                text = output_item['text']
-                
-                if label not in label_texts:
-                    label_texts[label] = []
-                label_texts[label].append(text)
-
-        # Order of columns as requested
-        column_order = [
-            'RECEIPTNUMBER', 'MERCHANTNAME', 'MERCHANTADDRESS', 
-            'TRANSACTIONDATE', 'TRANSACTIONTIME', 'ITEMS', 
-            'PRICE', 'TOTAL', 'VATTAX'
-        ]
-
-        # Writing data to CSV file with ordered columns
-        with open(output_file_path, 'w', newline='') as csvfile:
-            csv_writer = csv.DictWriter(csvfile, fieldnames=column_order, delimiter=",")
-            csv_writer.writeheader()
-
-            # Iterating over each item and price, creating a new row for each pair
-            items = label_texts.get('ITEMS', [])
-            prices = label_texts.get('PRICE', [])
-            
-            for i in range(max(len(items), len(prices))):
-                item_words = items[i].split() if i < len(items) else ['']
-                price_words = prices[i].split() if i < len(prices) else ['']
-
-                for j, (item, price) in enumerate(zip_longest(item_words, price_words, fillvalue='')):
-                    row_data = {
-                        'ITEMS': item,
-                        'PRICE': replace_symbols_with_period(price) if 'PRICE' in label_texts else price  # Replace symbols with period
-                    }
-                    if j == 0:
-                        row_data.update({
-                            label: replace_symbols_with_period(label_texts[label][0]) if label in ['TOTAL', 'VATTAX'] and label in label_texts and 0 < len(label_texts[label]) else label_texts[label][0] if label in label_texts and 0 < len(label_texts[label]) else '' 
-                            for label in column_order if label not in ['ITEMS', 'PRICE']
-                        })
-                    
-                    csv_writer.writerow(row_data)
+        # Path to the folder containing JSON files
+        json_folder_path = r"static/temp/labeled"  # Change this to your folder path
+
+        # Path to the output CSV folder
+        output_folder_path = r"inferenced/csv_files"
+        os.makedirs(output_folder_path, exist_ok=True)
+
+        # Initialize an empty list to store all JSON data
+        all_data = []
+
+        # Iterate through JSON files in the folder
+        for filename in os.listdir(json_folder_path):
+            if filename.endswith(".json"):
+                json_file_path = os.path.join(json_folder_path, filename)
+
+                with open(json_file_path, 'r') as file:
+                    data = json.load(file)
+                    all_data.extend(data['output'])
+
+                # Creating a dictionary to store labels and corresponding texts for this JSON file
+                label_texts = {}
+                for item in data['output']:
+                    label = item['label']
+                    text = item['text']
+
+                    # Ensure label exists before adding to dictionary
+                    if label not in label_texts:
+                        label_texts[label] = []
+                    label_texts[label].append(text)
+
+                # Order of columns as requested
+                column_order = [
+                    'RECEIPTNUMBER', 'MERCHANTNAME', 'MERCHANTADDRESS',
+                    'TRANSACTIONDATE', 'TRANSACTIONTIME', 'ITEMS',
+                    'PRICE', 'TOTAL', 'VATTAX'
+                ]
+
+                # Writing data to CSV file with ordered columns
+                csv_file_path = os.path.join(output_folder_path, os.path.splitext(filename)[0] + '.csv')
+                with open(csv_file_path, 'w', newline='') as csvfile:
+                    csv_writer = csv.DictWriter(csvfile, fieldnames=column_order, delimiter=",")
+                    csv_writer.writeheader()
+
+                    # Iterate through items and prices
+                    max_length = max(len(label_texts.get('ITEMS', [])), len(label_texts.get('PRICE', [])))
+                    for i in range(max_length):
+                        # Use get() with default '' to avoid KeyError
+                        items = label_texts.get('ITEMS', [])[i] if i < len(label_texts.get('ITEMS', [])) else ''
+                        prices = label_texts.get('PRICE', [])[i] if i < len(label_texts.get('PRICE', [])) else ''
+
+                        # Check if items and prices are separated by space
+                        if ' ' in items or ' ' in prices:
+                            item_list = items.split() if items else []
+                            price_list = prices.split() if prices else []
+
+                            # Create new rows for each combination of items and prices
+                            for item, price in zip(item_list, price_list):
+                                row_data = {label: replace_symbols_with_period(label_texts[label][i]) if label == 'ITEMS' else replace_symbols_with_period(label_texts[label][i]) for label in column_order}
+                                row_data['ITEMS'] = item
+                                row_data['PRICE'] = price
+                                csv_writer.writerow(row_data)
+                        else:
+                            # Use get() with default '' to avoid KeyError
+                            row_data = {label: replace_symbols_with_period(label_texts.get(label, [])[i]) if i < len(label_texts.get(label, [])) else '' for label in column_order}
+                            csv_writer.writerow(row_data)
+
+        # Combining contents of CSV files into a single CSV file
+        output_file_path = r"inferenced/output.csv"
+        with open(output_file_path, 'w', newline='') as combined_csvfile:
+            combined_csv_writer = csv.DictWriter(combined_csvfile, fieldnames=column_order, delimiter=",")
+            combined_csv_writer.writeheader()
+
+            # Iterate through CSV files in the folder
+            for csv_filename in os.listdir(output_folder_path):
+                if csv_filename.endswith(".csv"):
+                    csv_file_path = os.path.join(output_folder_path, csv_filename)
+
+                    # Read data from CSV file and write to the combined CSV file
+                    with open(csv_file_path, 'r') as csv_file:
+                        csv_reader = csv.DictReader(csv_file)
+                        for row in csv_reader:
+                            combined_csv_writer.writerow(row)
 
         return '', 204  # Return an empty response with a 204 status code
-    except Exception as e:
-        return jsonify({"error": str(e)})
 
+    except Exception as e:
+        print(f"An error occurred in create_csv: {str(e)}")
+        return None
         
 @app.route('/get_data')
 def get_data():
     return send_from_directory('inferenced','output.csv', as_attachment=False)
 
+from flask import jsonify
 
 @app.route('/download_csv', methods=['GET'])
 def download_csv():
     try:
-        folder_path = r"inferenced"  # path to the folder
-        
-        # Get a list of all files in the folder
-        files = [f for f in os.listdir(folder_path) if os.path.isfile(os.path.join(folder_path, f))]
-        
-        # Check if there are any files in the folder
-        if files:
-            # Create a ZIP file containing all files
-            zip_filename = 'inferenced_files.zip'
-            zip_file_path = os.path.join(folder_path, zip_filename)
-            with zipfile.ZipFile(zip_file_path, 'w') as zipf:
-                for file in files:
-                    file_path = os.path.join(folder_path, file)
-                    zipf.write(file_path, os.path.basename(file_path))
-            
-            # Send the ZIP file as an attachment
-            return send_file(zip_file_path, as_attachment=True, download_name=zip_filename)
+        output_file_path = r"inferenced/output.csv"  # path to output CSV file
+        # Check if the file exists
+        if os.path.exists(output_file_path):
+            return send_file(output_file_path, as_attachment=True, download_name='output.csv')
         else:
-            return jsonify({"error": "No files found in the folder"})
+            return jsonify({"error": "CSV file not found"})
     except Exception as e:
         return jsonify({"error": f"Download failed: {str(e)}"})
 
 
+
 if __name__ == '__main__':
     app.run(debug=True)

inferenced/csv_files/Output_0.csv

@@ -0,0 +1,4 @@
+RECEIPTNUMBER,MERCHANTNAME,MERCHANTADDRESS,TRANSACTIONDATE,TRANSACTIONTIME,ITEMS,PRICE,TOTAL,VATTAX
+# 2480507,7 - ELEVEN �,Poblacion . Leon . Iloilo . Philippines,04 / 30 / 2023 ( Surt ),17 : 13 : 00,C26rnTeaLemon500ml,39.000,88.00,9.43
+# 2480507,7 - ELEVEN �,Poblacion . Leon . Iloilo . Philippines,04 / 30 / 2023 ( Surt ),17 : 13 : 00,COBRENRGYORNK350ML,28.000,88.00,9.43
+# 2480507,7 - ELEVEN �,Poblacion . Leon . Iloilo . Philippines,04 / 30 / 2023 ( Surt ),17 : 13 : 00,OTSHIBMPFRSPLNS50G,21.000,88.00,9.43

inferenced/csv_files/Output_1.csv

@@ -0,0 +1,2 @@
+RECEIPTNUMBER,MERCHANTNAME,MERCHANTADDRESS,TRANSACTIONDATE,TRANSACTIONTIME,ITEMS,PRICE,TOTAL,VATTAX
+01053710,Iloilo Grace Pharmacy,C & J Building Jalandoni Extension Bolilao,08 / 12 / 2023,10 : 07,PharmtonEsentialCao,23.75,23 - 75,

inferenced/csv_files/Output_2.csv

@@ -0,0 +1,3 @@
+RECEIPTNUMBER,MERCHANTNAME,MERCHANTADDRESS,TRANSACTIONDATE,TRANSACTIONTIME,ITEMS,PRICE,TOTAL,VATTAX
+# 1457229,7 - ELEVEN �,Poblacion . Leon . Iloilo .,05 / 01 / 2023 ( Mon ),16 : 54 : 23,NESTEALEMICET500ML,35.000,76.00,8.14
+# 1457229,7 - ELEVEN �,Poblacion . Leon . Iloilo .,05 / 01 / 2023 ( Mon ),16 : 54 : 23,ArlaGStrwbryT200ml,41.000,76.00,8.14

inferenced/csv_files/Output_3.csv

@@ -0,0 +1,2 @@
+RECEIPTNUMBER,MERCHANTNAME,MERCHANTADDRESS,TRANSACTIONDATE,TRANSACTIONTIME,ITEMS,PRICE,TOTAL,VATTAX
+000036410,WVSU Multi Purpose Cooperative,Luna Street Lapaz Iloilo City,10 - 25 - 2023,01 : 29 : 49 PM,COKE,13.00,13.00,1.39

inferenced/csv_files/Output_4.csv

@@ -0,0 +1,2 @@
+RECEIPTNUMBER,MERCHANTNAME,MERCHANTADDRESS,TRANSACTIONDATE,TRANSACTIONTIME,ITEMS,PRICE,TOTAL,VATTAX
+01053735,Iloilo Grace Pharmacy,C & J Building Jalandoni Extension Bolilao,09 / 12 / 2023,11 : 07,EQDryTravelM18,3.31.00,331 - 00,35.46

inferenced/output.csv

@@ -0,0 +1,9 @@
+RECEIPTNUMBER,MERCHANTNAME,MERCHANTADDRESS,TRANSACTIONDATE,TRANSACTIONTIME,ITEMS,PRICE,TOTAL,VATTAX
+# 2480507,7 - ELEVEN �,Poblacion . Leon . Iloilo . Philippines,04 / 30 / 2023 ( Surt ),17 : 13 : 00,C26rnTeaLemon500ml,39.000,88.00,9.43
+# 2480507,7 - ELEVEN �,Poblacion . Leon . Iloilo . Philippines,04 / 30 / 2023 ( Surt ),17 : 13 : 00,COBRENRGYORNK350ML,28.000,88.00,9.43
+# 2480507,7 - ELEVEN �,Poblacion . Leon . Iloilo . Philippines,04 / 30 / 2023 ( Surt ),17 : 13 : 00,OTSHIBMPFRSPLNS50G,21.000,88.00,9.43
+01053710,Iloilo Grace Pharmacy,C & J Building Jalandoni Extension Bolilao,08 / 12 / 2023,10 : 07,PharmtonEsentialCao,23.75,23 - 75,
+# 1457229,7 - ELEVEN �,Poblacion . Leon . Iloilo .,05 / 01 / 2023 ( Mon ),16 : 54 : 23,NESTEALEMICET500ML,35.000,76.00,8.14
+# 1457229,7 - ELEVEN �,Poblacion . Leon . Iloilo .,05 / 01 / 2023 ( Mon ),16 : 54 : 23,ArlaGStrwbryT200ml,41.000,76.00,8.14
+000036410,WVSU Multi Purpose Cooperative,Luna Street Lapaz Iloilo City,10 - 25 - 2023,01 : 29 : 49 PM,COKE,13.00,13.00,1.39
+01053735,Iloilo Grace Pharmacy,C & J Building Jalandoni Extension Bolilao,09 / 12 / 2023,11 : 07,EQDryTravelM18,3.31.00,331 - 00,35.46

log/error_output.log

@@ -53,3 +53,258 @@
 2024-01-05 14:05:21,728 ERROR __main__ 'NoneType' object is not iterable
 2024-01-05 20:38:28,390 ERROR __main__ 'NoneType' object is not iterable
 2024-01-05 20:38:46,926 ERROR __main__ 'NoneType' object is not iterable
+2024-02-05 22:07:24,636 ERROR __main__ 'ModelHandler' object has no attribute 'handle'
+2024-02-05 22:07:35,496 ERROR __main__ 'ModelHandler' object has no attribute 'handle'
+2024-02-05 22:20:43,227 ERROR __main__ 'ModelHandler' object has no attribute 'handle'
+2024-02-05 22:20:43,336 ERROR __main__ 'ModelHandler' object has no attribute 'handle'
+2024-02-11 22:09:51,699 ERROR __main__ string indices must be integers, not 'str'
+2024-02-11 22:09:52,871 ERROR __main__ string indices must be integers, not 'str'
+2024-02-11 22:18:29,791 ERROR __main__ 0
+2024-02-11 22:18:30,237 ERROR __main__ 0
+2024-02-11 22:57:32,246 ERROR __main__ string indices must be integers, not 'str'
+2024-02-11 22:57:34,137 ERROR __main__ string indices must be integers, not 'str'
+2024-02-11 23:07:26,326 ERROR __main__ 'NoneType' object is not iterable
+2024-02-11 23:07:26,685 ERROR __main__ 'NoneType' object is not iterable
+2024-02-11 23:19:56,814 ERROR __main__ [Errno 2] No such file or directory: 'outputs/LayoutlMV3InferenceOutput_0.json'
+2024-02-11 23:19:57,705 ERROR __main__ [Errno 2] No such file or directory: 'outputs/LayoutlMV3InferenceOutput_0.json'
+2024-02-11 23:27:11,537 ERROR __main__ [Errno 2] No such file or directory: 'outputs/LayoutlMV3InferenceOutput_0.json'
+2024-02-11 23:27:11,756 ERROR __main__ [Errno 2] No such file or directory: 'outputs/LayoutlMV3InferenceOutput_0.json'
+2024-02-12 00:21:48,656 ERROR __main__ name 'image_path' is not defined
+2024-02-12 08:26:33,701 ERROR app unsupported operand type(s) for +: 'NoneType' and 'str'
+2024-02-12 08:26:33,704 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 08:26:33] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 08:26:33,762 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 08:26:33] "GET /create_csv HTTP/1.1" 200 -
+2024-02-12 08:26:34,307 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 08:26:34] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 08:39:52,998 ERROR app unsupported operand type(s) for +: 'NoneType' and 'str'
+2024-02-12 08:39:53,001 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 08:39:53] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 08:39:53,035 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 08:39:53] "GET /create_csv HTTP/1.1" 200 -
+2024-02-12 08:39:53,589 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 08:39:53] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 11:00:14,343 ERROR app [Errno 2] No such file or directory: 'temp/labeled/LayoutlMV3InferenceOutput_0.json'
+2024-02-12 11:00:14,359 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 11:00:14] "GET /run_inference HTTP/1.1" 200 -
+2024-02-12 11:00:14,900 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 11:00:14] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 11:06:54,109 ERROR app [Errno 2] No such file or directory: 'temp/labeled/LayoutlMV3InferenceOutput_0.json'
+2024-02-12 11:06:54,109 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 11:06:54] "GET /run_inference HTTP/1.1" 200 -
+2024-02-12 11:06:54,664 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 11:06:54] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 11:21:29,642 ERROR app [Errno 2] No such file or directory: 'labeled/LayoutlMV3InferenceOutput_0.json'
+2024-02-12 11:21:29,657 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 11:21:29] "GET /run_inference HTTP/1.1" 200 -
+2024-02-12 11:21:30,234 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 11:21:30] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 15:22:39,701 ERROR app 'NoneType' object is not subscriptable
+2024-02-12 15:22:39,779 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:22:39] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 15:22:40,029 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:22:40] "GET /create_csv HTTP/1.1" 500 -
+2024-02-12 15:22:41,814 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:22:41] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 15:33:48,045 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:48] "GET / HTTP/1.1" 200 -
+2024-02-12 15:33:49,469 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:49] "GET /styles.css HTTP/1.1" 404 -
+2024-02-12 15:33:49,547 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:49] "GET /static/css/animate.css HTTP/1.1" 304 -
+2024-02-12 15:33:49,632 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:49] "GET /static/css/color.css HTTP/1.1" 304 -
+2024-02-12 15:33:49,766 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:49] "GET /static/css/font-awesome.min.css HTTP/1.1" 304 -
+2024-02-12 15:33:49,959 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:49] "GET /static/css/style.css HTTP/1.1" 304 -
+2024-02-12 15:33:50,049 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/images/logo.png HTTP/1.1" 304 -
+2024-02-12 15:33:50,109 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/images/uplogo.gif HTTP/1.1" 304 -
+2024-02-12 15:33:50,134 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/wow.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,184 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/jquery.1.8.3.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,243 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/featherlight.gallery.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,360 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/featherlight.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,585 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/jquery.enllax.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,709 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/jquery.scrollUp.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,752 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/static/js/jquery.stickyNavbar.min.js HTTP/1.1" 404 -
+2024-02-12 15:33:50,769 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/jquery.easing.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,816 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/jquery.waypoints.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,868 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/images-loaded.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,898 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/lightbox.min.js HTTP/1.1" 304 -
+2024-02-12 15:33:50,912 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:33:50] "GET /static/js/site.js HTTP/1.1" 304 -
+2024-02-12 15:34:20,927 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:20] "GET /static/fonts/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.1" 404 -
+2024-02-12 15:34:20,969 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:20] "GET /static/fonts/fontawesome-webfont.woff?v=4.7.0 HTTP/1.1" 404 -
+2024-02-12 15:34:21,014 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:21] "GET /static/fonts/fontawesome-webfont.ttf?v=4.7.0 HTTP/1.1" 404 -
+2024-02-12 15:34:43,540 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:43] "GET /static/images/favicon.ico HTTP/1.1" 304 -
+2024-02-12 15:34:57,852 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:57] "POST /upload HTTP/1.1" 302 -
+2024-02-12 15:34:58,580 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:58] "GET /predict/%5B'receipt_4.jpg'%5D HTTP/1.1" 200 -
+2024-02-12 15:34:59,230 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:59] "GET /predict/css/animate.css HTTP/1.1" 404 -
+2024-02-12 15:34:59,297 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:59] "GET /static/css/style.css HTTP/1.1" 304 -
+2024-02-12 15:34:59,413 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:59] "GET /static/css/color.css HTTP/1.1" 304 -
+2024-02-12 15:34:59,563 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:34:59] "GET /static/css/font-awesome.min.css HTTP/1.1" 304 -
+2024-02-12 15:35:00,080 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/jquery.1.8.3.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,225 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/images/logo.png HTTP/1.1" 304 -
+2024-02-12 15:35:00,270 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/wow.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,374 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/featherlight.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,455 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/featherlight.gallery.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,518 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/jquery.enllax.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,681 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/jquery.scrollUp.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,747 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/jquery.easing.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,780 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/jquery.stickyNavbar.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,864 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/jquery.waypoints.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,898 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/images-loaded.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,914 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/lightbox.min.js HTTP/1.1" 304 -
+2024-02-12 15:35:00,935 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:00] "GET /static/js/site.js HTTP/1.1" 304 -
+2024-02-12 15:35:01,331 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:35:01] "GET /static/images/favicon.ico HTTP/1.1" 304 -
+2024-02-12 15:38:18,229 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:38:18] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 15:38:18,825 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:38:18] "GET /create_csv HTTP/1.1" 204 -
+2024-02-12 15:38:19,453 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 15:38:19] "GET /get_data HTTP/1.1" 200 -
+2024-02-12 16:17:35,300 ERROR app 'NoneType' object is not iterable
+2024-02-12 16:17:35,300 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:17:35] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 16:17:35,383 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:17:35] "GET /create_csv HTTP/1.1" 204 -
+2024-02-12 16:17:35,949 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:17:35] "GET /get_data HTTP/1.1" 200 -
+2024-02-12 16:18:09,159 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET / HTTP/1.1" 200 -
+2024-02-12 16:18:09,415 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/css/style.css HTTP/1.1" 304 -
+2024-02-12 16:18:09,546 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/css/font-awesome.min.css HTTP/1.1" 304 -
+2024-02-12 16:18:09,656 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/css/color.css HTTP/1.1" 304 -
+2024-02-12 16:18:09,686 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/images/logo.png HTTP/1.1" 304 -
+2024-02-12 16:18:09,703 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/css/animate.css HTTP/1.1" 200 -
+2024-02-12 16:18:09,728 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /styles.css HTTP/1.1" 404 -
+2024-02-12 16:18:09,871 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/images/uplogo.gif HTTP/1.1" 200 -
+2024-02-12 16:18:09,925 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/js/jquery.1.8.3.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:09,974 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:09] "GET /static/js/wow.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,056 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/featherlight.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,075 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/featherlight.gallery.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,192 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/jquery.enllax.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,444 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/jquery.scrollUp.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,499 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/jquery.easing.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,534 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/static/js/jquery.stickyNavbar.min.js HTTP/1.1" 404 -
+2024-02-12 16:18:10,596 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/jquery.waypoints.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,768 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/images-loaded.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,790 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/lightbox.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:10,940 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:10] "GET /static/js/site.js HTTP/1.1" 304 -
+2024-02-12 16:18:15,475 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:15] "GET /static/images/favicon.ico HTTP/1.1" 304 -
+2024-02-12 16:18:35,183 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:35] "POST /upload HTTP/1.1" 302 -
+2024-02-12 16:18:35,889 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:35] "GET /predict/%5B'sample_grace.jpg',%20'sample1_711.jpg'%5D HTTP/1.1" 200 -
+2024-02-12 16:18:36,090 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/css/style.css HTTP/1.1" 304 -
+2024-02-12 16:18:36,115 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/css/color.css HTTP/1.1" 304 -
+2024-02-12 16:18:36,145 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/css/font-awesome.min.css HTTP/1.1" 304 -
+2024-02-12 16:18:36,241 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/images/logo.png HTTP/1.1" 304 -
+2024-02-12 16:18:36,251 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /predict/css/animate.css HTTP/1.1" 404 -
+2024-02-12 16:18:36,296 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/jquery.1.8.3.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,347 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/wow.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,436 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/featherlight.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,488 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/jquery.stickyNavbar.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,512 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/featherlight.gallery.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,529 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/jquery.enllax.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,579 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/jquery.scrollUp.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,635 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/jquery.easing.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,676 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/jquery.waypoints.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,719 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/site.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,743 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/images-loaded.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:36,785 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:36] "GET /static/js/lightbox.min.js HTTP/1.1" 304 -
+2024-02-12 16:18:37,120 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:18:37] "GET /static/images/favicon.ico HTTP/1.1" 304 -
+2024-02-12 16:21:17,090 ERROR app 'NoneType' object is not iterable
+2024-02-12 16:21:17,100 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:21:17] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 16:21:17,131 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:21:17] "GET /create_csv HTTP/1.1" 500 -
+2024-02-12 16:21:17,662 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 16:21:17] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 17:02:28,396 ERROR app 'NoneType' object is not iterable
+2024-02-12 17:02:28,396 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 17:02:28] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 17:02:28,447 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 17:02:28] "GET /create_csv HTTP/1.1" 500 -
+2024-02-12 17:02:29,128 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 17:02:29] "GET /get_data HTTP/1.1" 404 -
+2024-02-12 17:33:50,964 ERROR app 'NoneType' object is not iterable
+2024-02-12 17:33:50,964 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 17:33:50] "GET /run_inference HTTP/1.1" 302 -
+2024-02-12 17:33:50,980 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 17:33:50] "GET /create_csv HTTP/1.1" 500 -
+2024-02-12 17:33:51,501 INFO werkzeug 127.0.0.1 - - [12/Feb/2024 17:33:51] "GET /get_data HTTP/1.1" 404 -2024-02-22 08:35:19,397 ERROR app 'NoneType' object is not iterable
+2024-02-22 08:35:19,409 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 08:35:19] "GET /run_inference HTTP/1.1" 302 -
+2024-02-22 08:35:19,459 ERROR app Exception on /create_csv [GET]
+Traceback (most recent call last):
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
+    response = self.full_dispatch_request()
+               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1487, in full_dispatch_request
+    return self.finalize_request(rv)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1506, in finalize_request
+    response = self.make_response(rv)
+               ^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1801, in make_response
+    raise TypeError(
+TypeError: The view function for 'create_csv' did not return a valid response. The function either returned None or ended without a return statement.
+2024-02-22 08:35:19,467 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 08:35:19] "GET /create_csv HTTP/1.1" 500 -
+2024-02-22 08:35:20,086 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 08:35:20] "GET /get_data HTTP/1.1" 404 -
+2024-02-22 08:56:07,674 ERROR app 'NoneType' object is not iterable
+2024-02-22 08:56:07,680 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 08:56:07] "GET /run_inference HTTP/1.1" 302 -
+2024-02-22 08:56:07,738 ERROR app Exception on /create_csv [GET]
+Traceback (most recent call last):
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
+    response = self.full_dispatch_request()
+               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1487, in full_dispatch_request
+    return self.finalize_request(rv)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1506, in finalize_request
+    response = self.make_response(rv)
+               ^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1801, in make_response
+    raise TypeError(
+TypeError: The view function for 'create_csv' did not return a valid response. The function either returned None or ended without a return statement.
+2024-02-22 08:56:07,746 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 08:56:07] "GET /create_csv HTTP/1.1" 500 -
+2024-02-22 08:56:08,300 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 08:56:08] "GET /get_data HTTP/1.1" 404 -
+2024-02-22 10:10:19,427 ERROR app 'NoneType' object is not iterable
+2024-02-22 10:10:19,434 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:10:19] "GET /run_inference HTTP/1.1" 302 -
+2024-02-22 10:10:19,502 ERROR app Exception on /create_csv [GET]
+Traceback (most recent call last):
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
+    response = self.full_dispatch_request()
+               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1487, in full_dispatch_request
+    return self.finalize_request(rv)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1506, in finalize_request
+    response = self.make_response(rv)
+               ^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1801, in make_response
+    raise TypeError(
+TypeError: The view function for 'create_csv' did not return a valid response. The function either returned None or ended without a return statement.
+2024-02-22 10:10:19,518 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:10:19] "GET /create_csv HTTP/1.1" 500 -
+2024-02-22 10:10:21,030 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:10:21] "GET /get_data HTTP/1.1" 404 -
+2024-02-22 10:15:13,513 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET / HTTP/1.1" 200 -
+2024-02-22 10:15:13,667 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/css/style.css HTTP/1.1" 304 -
+2024-02-22 10:15:13,683 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/css/color.css HTTP/1.1" 304 -
+2024-02-22 10:15:13,700 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/css/font-awesome.min.css HTTP/1.1" 304 -
+2024-02-22 10:15:13,739 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/css/animate.css HTTP/1.1" 304 -
+2024-02-22 10:15:13,751 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /styles.css HTTP/1.1" 404 -
+2024-02-22 10:15:13,803 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/images/logo.png HTTP/1.1" 304 -
+2024-02-22 10:15:13,818 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/images/uplogo.gif HTTP/1.1" 304 -
+2024-02-22 10:15:13,976 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/js/jquery.1.8.3.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:13,976 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/js/wow.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:13,987 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:13] "GET /static/js/featherlight.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:14,007 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/js/featherlight.gallery.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:14,446 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/js/jquery.enllax.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:14,566 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/js/jquery.scrollUp.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:14,701 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/js/jquery.easing.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:14,734 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/static/js/jquery.stickyNavbar.min.js HTTP/1.1" 404 -
+2024-02-22 10:15:14,776 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/js/jquery.waypoints.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:14,816 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:14] "GET /static/js/images-loaded.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:16,790 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:16] "GET /static/js/site.js HTTP/1.1" 304 -
+2024-02-22 10:15:16,797 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:16] "GET /static/js/lightbox.min.js HTTP/1.1" 304 -
+2024-02-22 10:15:16,992 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:15:16] "GET /static/images/favicon.ico HTTP/1.1" 304 -
+2024-02-22 10:16:06,240 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:06] "POST /upload HTTP/1.1" 302 -
+2024-02-22 10:16:12,283 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /predict/['receipt_384.jpg'] HTTP/1.1" 200 -
+2024-02-22 10:16:12,541 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/css/style.css HTTP/1.1" 304 -
+2024-02-22 10:16:12,553 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/css/color.css HTTP/1.1" 304 -
+2024-02-22 10:16:12,643 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /predict/css/animate.css HTTP/1.1" 404 -
+2024-02-22 10:16:12,648 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/css/font-awesome.min.css HTTP/1.1" 304 -
+2024-02-22 10:16:12,744 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/images/logo.png HTTP/1.1" 304 -
+2024-02-22 10:16:12,821 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/temp/img_display/receipt_384.jpg HTTP/1.1" 200 -
+2024-02-22 10:16:12,850 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/images/avatar.gif HTTP/1.1" 304 -
+2024-02-22 10:16:12,877 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/js/jquery.1.8.3.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:12,903 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/js/wow.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:12,972 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/js/featherlight.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:12,977 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/js/featherlight.gallery.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:12,985 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:12] "GET /static/js/jquery.enllax.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,042 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/jquery.scrollUp.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,084 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/jquery.easing.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,108 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/jquery.stickyNavbar.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,125 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/jquery.waypoints.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,159 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/images-loaded.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,196 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/lightbox.min.js HTTP/1.1" 304 -
+2024-02-22 10:16:13,200 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:13] "GET /static/js/site.js HTTP/1.1" 304 -
+2024-02-22 10:16:14,036 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:16:14] "GET /static/images/favicon.ico HTTP/1.1" 304 -
+2024-02-22 10:18:01,407 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:18:01] "GET /run_inference HTTP/1.1" 302 -
+2024-02-22 10:18:01,531 ERROR app Exception on /create_csv [GET]
+Traceback (most recent call last):
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
+    response = self.full_dispatch_request()
+               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1487, in full_dispatch_request
+    return self.finalize_request(rv)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1506, in finalize_request
+    response = self.make_response(rv)
+               ^^^^^^^^^^^^^^^^^^^^^^
+  File "C:\Users\Ayoo\anaconda3\envs\mlenv\Lib\site-packages\flask\app.py", line 1801, in make_response
+    raise TypeError(
+TypeError: The view function for 'create_csv' did not return a valid response. The function either returned None or ended without a return statement.
+2024-02-22 10:18:01,539 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:18:01] "GET /create_csv HTTP/1.1" 500 -
+2024-02-22 10:18:02,099 INFO werkzeug 127.0.0.1 - - [22/Feb/2024 10:18:02] "GET /get_data HTTP/1.1" 404 -

static/css/style.css

@@ -1,17 +1,15 @@
 /*------------------------------------------------------------------------------------------*/
 
-
 /* 1. Defaults & Reset of specific styles across browsers */
 
-
 /*------------------------------------------------------------------------------------------*/
 
 *,
 *:before,
 *:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body,
@@ -33,1333 +31,1287 @@ form,
 blockquote,
 th,
 td {
-    margin: 0;
-    padding: 0;
-    direction: ltr;
+  margin: 0;
+  padding: 0;
+  direction: ltr;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    -webkit-font-smoothing: antialiased;
-    overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
 
 p {
-    line-height: 25px;
+  line-height: 25px;
 }
 
 .row img {
-    height: auto;
-    max-width: 100%;
+  height: auto;
+  max-width: 100%;
 }
 
 a {
-    text-decoration: none;
-    line-height: inherit;
-    -webkit-transition: opacity 0.3s ease-out;
-    -moz-transition: opacity 0.3s ease-out;
-    -o-transition: opacity 0.3s ease-out;
-    transition: opacity 0.3s ease-out;
+  text-decoration: none;
+  line-height: inherit;
+  -webkit-transition: opacity 0.3s ease-out;
+  -moz-transition: opacity 0.3s ease-out;
+  -o-transition: opacity 0.3s ease-out;
+  transition: opacity 0.3s ease-out;
 }
 
 iframe {
-    border: 0 !important;
+  border: 0 !important;
 }
 
 .parallax-window {
-    min-height: 400px;
-    background: transparent;
+  min-height: 400px;
+  background: transparent;
 }
 
 figure {
-    margin: 0;
+  margin: 0;
 }
 
-
 /* Page Border */
 
 .page-border {
-    position: fixed;
-    z-index: 999999;
-    pointer-events: none;
+  position: fixed;
+  z-index: 999999;
+  pointer-events: none;
 }
 
 .page-border .bottom-border,
 .page-border .left-border,
 .page-border .right-border,
 .page-border .top-border {
-    background: #f3f3efcd;
-    position: fixed;
-    z-index: 9999;
+  background: #f3f3efcd;
+  position: fixed;
+  z-index: 9999;
 }
 
-.page-border>.top-border,
-.page-border>.right-border,
-.page-border>.bottom-border,
-.page-border>.left-border {
-    padding: 11px;
-    background: #ccc;
+.page-border > .top-border,
+.page-border > .right-border,
+.page-border > .bottom-border,
+.page-border > .left-border {
+  padding: 11px;
+  background: #ccc;
 }
 
 .page-border .bottom-border,
 .page-border .top-border {
-    width: 100%;
-    padding: 10px;
-    left: 0;
+  width: 100%;
+  padding: 10px;
+  left: 0;
 }
 
 .page-border .left-border,
 .page-border .right-border {
-    padding: 10px;
-    height: 100%;
-    top: 0;
+  padding: 10px;
+  height: 100%;
+  top: 0;
 }
 
 .page-border .top-border {
-    top: 0;
+  top: 0;
 }
 
 .page-border .right-border {
-    right: 0;
+  right: 0;
 }
 
 .page-border .bottom-border {
-    bottom: 0;
+  bottom: 0;
 }
 
 .page-border .left-border {
-    left: 0;
+  left: 0;
 }
 
 #wrapper {
-    margin: 0 15px;
-    padding: 15px 0;
-    position: relative;
+  margin: 0 15px;
+  padding: 15px 0;
+  position: relative;
 }
 
-
 /* --------- 1.1 Input Elements ---------- */
 
 input,
 textarea {
-    border: 1px solid #e1e1e1;
-    padding: 10px;
-    -webkit-transition: all .3s linear;
-    -moz-transition: all .3s linear;
-    transition: all .3s linear;
-    border-radius: 3px;
+  border: 1px solid #e1e1e1;
+  padding: 10px;
+  -webkit-transition: all 0.3s linear;
+  -moz-transition: all 0.3s linear;
+  transition: all 0.3s linear;
+  border-radius: 3px;
 }
 
 input {
-    height: 40px;
-    margin: 3px 0;
-    outline: none;
-    line-height: normal;
-    font-size: 14px;
+  height: 40px;
+  margin: 3px 0;
+  outline: none;
+  line-height: normal;
+  font-size: 14px;
 }
 
 input[type="submit"] {
-    cursor: pointer;
-    border-style: solid;
-    border-width: 2px;
-    padding-top: 0;
-    padding-bottom: 0;
+  cursor: pointer;
+  border-style: solid;
+  border-width: 2px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 select {
-    border: 1px solid #e1e1e1;
-    height: 40px;
-    padding: 5px;
+  border: 1px solid #e1e1e1;
+  height: 40px;
+  padding: 5px;
 }
 
 input:focus,
 textarea:focus {
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 *:focus {
-    outline: none;
+  outline: none;
 }
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* 2. Layout Elements */
 
-
 /*------------------------------------------------------------------------------------------*/
 
 section {
-    clear: both;
-    overflow: hidden;
+  clear: both;
+  overflow: hidden;
 }
 
-
 /* Rows and Columns */
 
 .row {
-    max-width: 1245px;
-    margin: 0 auto;
-    padding: 75px 0;
-    position: relative;
+  max-width: 1245px;
+  margin: 0 auto;
+  padding: 75px 0;
+  position: relative;
 }
 
 .no-padding-bottom .row,
 .no-padding-bottom div,
 .no-padding-bottom.row {
-    padding-bottom: 0;
+  padding-bottom: 0;
 }
 
 .no-padding-top.row,
 .no-padding-top div {
-    padding-top: 0;
+  padding-top: 0;
 }
 
 .big-padding-top {
-    padding-top: 75px !important;
+  padding-top: 75px !important;
 }
 
 .big-padding-bottom {
-    padding-bottom: 85px !important;
+  padding-bottom: 85px !important;
 }
 
-
 /* Targets all elements */
 
-[class*='col-'] {
-    float: left;
-    padding: 20px;
+[class*="col-"] {
+  float: left;
+  padding: 20px;
 }
 
-#clients .col-2-3 [class*='col-'] {
-    padding: 0;
+#clients .col-2-3 [class*="col-"] {
+  padding: 0;
 }
 
-
 /* Clearfix */
 
 .clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
+  content: "";
+  display: table;
+  clear: both;
 }
 
-
 /* Main Widths */
 
 .col-1 {
-    width: 100%;
+  width: 100%;
 }
 
 .col-2 {
-    width: 50%;
+  width: 50%;
 }
 
 .col-3 {
-    width: 33.33%;
+  width: 33.33%;
 }
 
 .col-4 {
-    width: 25%;
+  width: 25%;
 }
 
 .col-5 {
-    width: 20%;
+  width: 20%;
 }
 
 .col-6 {
-    width: 16.6666666667%;
+  width: 16.6666666667%;
 }
 
 .col-7 {
-    width: 14.2857142857%;
+  width: 14.2857142857%;
 }
 
 .col-8 {
-    width: 12.5%;
+  width: 12.5%;
 }
 
 .col-9 {
-    width: 11.1111111111%;
+  width: 11.1111111111%;
 }
 
 .col-10 {
-    width: 10%;
+  width: 10%;
 }
 
 .col-11 {
-    width: 9.09090909091%;
+  width: 9.09090909091%;
 }
 
 .col-12 {
-    width: 8.33%;
+  width: 8.33%;
 }
 
 .col-2-3 {
-    width: 66.66%;
+  width: 66.66%;
 }
 
 .col-3-4 {
-    width: 75%;
+  width: 75%;
 }
 
 .col-9-10 {
-    width: 90%;
+  width: 90%;
 }
 
-
 /* Golden Ratio */
 
 .col-lg-6 {
-    width: 50%;
-    height: auto;
+  width: 50%;
+  height: auto;
 }
 
 .col-lg-3 {
-    width: 50%;
+  width: 50%;
 }
 
-
 /* --------- 2.1 Header --------- */
 
 #header {
-    height: 71px !important;
-    overflow: visible;
-    z-index: 9999;
-    width: 100%;
-    position: absolute !important;
+  height: 71px !important;
+  overflow: visible;
+  z-index: 9999;
+  width: 100%;
+  position: absolute !important;
 }
 
 #header .row {
-    padding: 0;
+  padding: 0;
 }
 
 #header aside {
-    text-align: right;
+  text-align: right;
 }
 
 #header ul {
-    text-align: right;
+  text-align: right;
 }
 
 #header li {
-    display: inline-block;
-    list-style: none;
-    margin: 0;
+  display: inline-block;
+  list-style: none;
+  margin: 0;
 }
 
-
 /* --------- 2.2 Logo ---------- */
 
 #logo {
-    float: left;
-    height: 90px;
-    line-height: 66px;
-    margin: 10px 15px 0 0;
+  float: left;
+  height: 90px;
+  line-height: 66px;
+  margin: 10px 15px 0 0;
 }
 
 #logo h1,
 #logo h2 {
-    display: inline-block;
+  display: inline-block;
 }
 
 #banner #logo h1 {
-    font-size: 28px;
-    margin-right: 10px;
-    font-weight: 900;
-    padding: 0;
+  font-size: 28px;
+  margin-right: 10px;
+  font-weight: 900;
+  padding: 0;
 }
 
 #logo h2 {
-    font-size: 18px;
-    padding: 0;
+  font-size: 18px;
+  padding: 0;
 }
 
 #logo img {
-    max-height: 40px;
-    vertical-align: middle;
-    margin-right: 15px;
+  max-height: 40px;
+  vertical-align: middle;
+  margin-right: 15px;
 }
 
 #navigation-logo {
-    display: none;
+  display: none;
 }
 
 .nav-solid #logo #banner-logo {
-    display: none;
+  display: none;
 }
 
 .nav-solid #logo #navigation-logo {
-    display: inline-block;
-    margin-bottom: 10px;
+  display: inline-block;
+  margin-bottom: 10px;
 }
 
-
 /* --------- 2.3 Buttons ---------- */
 
 .call-to-action {
-    padding: 35px 0 35px 0;
+  padding: 35px 0 35px 0;
 }
 
-
 /*Style*/
 
 .button {
-    font-size: 16px;
-    margin: 35px 0;
-    padding: 11px 16px;
-    -webkit-transition: all .3s linear;
-    -moz-transition: all .3s linear;
-    transition: all .3s linear;
-    display: inline-block;
-    border-width: 3px;
-    border-style: solid;
+  font-size: 16px;
+  margin: 35px 0;
+  padding: 11px 16px;
+  -webkit-transition: all 0.3s linear;
+  -moz-transition: all 0.3s linear;
+  transition: all 0.3s linear;
+  display: inline-block;
+  border-width: 3px;
+  border-style: solid;
 }
 
-
 /* --------- 2.4 Navigation ---------- */
 
 #header {
-    font-size: 13px;
+  font-size: 13px;
 }
 
 #header aside {
-    float: right;
+  float: right;
 }
 
 #header nav ul {
-    text-transform: uppercase;
+  text-transform: uppercase;
 }
 
 #header nav a {
-    height: 71px;
-    line-height: 90px;
-    display: block;
-    padding: 0 10px;
+  height: 71px;
+  line-height: 90px;
+  display: block;
+  padding: 0 10px;
 }
 
 #header nav a:hover {
-    color: #FF8B4A;
+  color: #ff8b4a;
 }
 
-
 /*Navigation Solid*/
 
-#header.nav-solid [class*='col-'] {
-    padding: 0 20px;
+#header.nav-solid [class*="col-"] {
+  padding: 0 20px;
 }
 
 #header.nav-solid {
-    background: #fff;
-    box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.2);
-    position: fixed !important;
-    left: 0;
+  background: #fff;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.2);
+  position: fixed !important;
+  left: 0;
 }
 
 #header.nav-solid nav a {
-    border-bottom: 3px solid;
-    border-color: #fff;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+  border-bottom: 3px solid;
+  border-color: #fff;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 #header.nav-solid nav a:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
-
 /* Social Elements when Solid*/
 
 #header.nav-solid .social-icons a {
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
-    opacity: 0.5;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  opacity: 0.5;
 }
 
 #header.nav-solid .social-icons a:hover {
-    opacity: 1;
-    color: #e4473c;
+  opacity: 1;
+  color: #e4473c;
 }
 
-
 /* Responsive Nav Styling */
 
 #nav-trigger {
-    display: none;
-    text-align: right;
+  display: none;
+  text-align: right;
 }
 
 #nav-trigger span {
-    display: inline-block;
-    width: 38px;
-    height: 71px;
-    color: #111;
-    cursor: pointer;
-    text-transform: uppercase;
-    font-size: 22px;
-    text-align: center;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+  display: inline-block;
+  width: 38px;
+  height: 71px;
+  color: #111;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 22px;
+  text-align: center;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 #nav-trigger span:after {
-    font-family: "fontAwesome";
-    display: inline-block;
-    width: 38px;
-    height: 71px;
-    line-height: 75px;
-    text-align: center;
-    content: '\2630';
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-    transition: all .4s ease-in-out;
+  font-family: "fontAwesome";
+  display: inline-block;
+  width: 38px;
+  height: 71px;
+  line-height: 75px;
+  text-align: center;
+  content: "\2630";
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  transition: all 0.4s ease-in-out;
 }
 
 #nav-trigger span.open:after {
-    content: '\269E';
-    transition: all .4s ease-in-out;
+  content: "\269E";
+  transition: all 0.4s ease-in-out;
 }
 
 #nav-trigger span:hover,
 .nav-solid #nav-trigger span.open:hover,
 .nav-solid #nav-trigger span:hover {
-    opacity: 0.6;
+  opacity: 0.6;
 }
 
 #nav-trigger span.open,
 #nav-trigger span.open:hover {
-    color: #111;
+  color: #111;
 }
 
 .nav-solid #nav-trigger span.open:hover {
-    color: #999;
+  color: #999;
 }
 
 .nav-solid #nav-trigger span {
-    color: #999;
-    opacity: 1;
+  color: #999;
+  opacity: 1;
 }
 
 nav#nav-mobile {
-    position: relative;
-    display: none;
+  position: relative;
+  display: none;
 }
 
 nav#nav-mobile ul {
-    display: none;
-    list-style-type: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    text-align: center;
-    background-color: #fff;
-    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.2);
+  display: none;
+  list-style-type: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+  background-color: #fff;
+  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.2);
 }
 
 nav#nav-mobile ul:after {
-    display: none;
+  display: none;
 }
 
 nav#nav-mobile li {
-    margin: 0 20px;
-    float: none;
-    text-align: left;
-    border-bottom: 1px solid #e1e1e1;
+  margin: 0 20px;
+  float: none;
+  text-align: left;
+  border-bottom: 1px solid #e1e1e1;
 }
 
 nav#nav-mobile li:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .nav-solid nav#nav-mobile li {
-    border-top: 1px solid #e1e1e1;
-    border-bottom: none;
+  border-top: 1px solid #e1e1e1;
+  border-bottom: none;
 }
 
 nav#nav-mobile a {
-    display: block;
-    padding: 12px 0;
-    color: #333;
-    text-align: center;
-    width: 100%;
-    height: auto;
-    line-height: normal;
-    display: block;
-    border-bottom: none !important;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+  display: block;
+  padding: 12px 0;
+  color: #333;
+  text-align: center;
+  width: 100%;
+  height: auto;
+  line-height: normal;
+  display: block;
+  border-bottom: none !important;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 nav#nav-mobile a:hover {
-    background: #fafafa;
-    opacity: 1;
+  background: #fafafa;
+  opacity: 1;
 }
 
-
 /* --------- 2.5 Social Elements ---------- */
 
 #header .col-4 {
-    text-align: right;
+  text-align: right;
 }
 
 .social-icons {
-    display: inline-block;
-    list-style: none;
+  display: inline-block;
+  list-style: none;
 }
 
 .social-icons a {
-    display: inline-block;
-    width: 32px;
-    text-align: center;
+  display: inline-block;
+  width: 32px;
+  text-align: center;
 }
 
 .social-icons a:hover {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .social-icons span {
-    display: none;
+  display: none;
 }
 
 #header .social-icons {
-    margin-top: 27px;
+  margin-top: 27px;
 }
 
-
 /* --------- 2.6 Images ---------- */
 
-
 /*Alignment*/
 
 img {
-    vertical-align: top;
+  vertical-align: top;
 }
 
 .image-center {
-    display: block;
-    margin: 0 auto;
+  display: block;
+  margin: 0 auto;
 }
 
 a img {
-    border: none;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
-    -webkit-backface-visibility: hidden;
+  border: none;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  -webkit-backface-visibility: hidden;
 }
 
 a img:hover {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* 3. Fonts */
 
-
 /*------------------------------------------------------------------------------------------*/
 
 h1 {
-    padding: 20px 0;
+  padding: 20px 0;
 }
 
 h2 {
-    padding: 14px 0;
+  padding: 14px 0;
 }
 
 h3 {
-    padding: 10px 0;
+  padding: 10px 0;
 }
 
 h4 {
-    padding: 7px 0;
+  padding: 7px 0;
 }
 
 h5 {
-    padding: 7px 0;
+  padding: 7px 0;
 }
 
 h6 {
-    padding: 7px 0;
+  padding: 7px 0;
 }
 
-
 /* Text Alignment */
 
 .text-left {
-    text-align: left;
+  text-align: left;
 }
 
 .text-center {
-    text-align: center;
+  text-align: center;
 }
 
 .text-right {
-    text-align: right;
+  text-align: right;
 }
 
-
 /* Section Headings */
 
 .section-heading {
-    padding: 0 0 15px 0;
-    display: flex;
-    justify-content: center;
+  padding: 0 0 15px 0;
+  display: flex;
+  justify-content: center;
 }
 
 .section-subtitle {
-    font-size: 18px;
-    padding-top: 0;
+  font-size: 18px;
+  padding-top: 0;
 }
 
 .section-heading h3 {
-    font-size: 14px;
-    font-weight: bold;
-    color: #ccc;
-    letter-spacing: 2px;
-    padding-bottom: 0;
+  font-size: 14px;
+  font-weight: bold;
+  color: #ccc;
+  letter-spacing: 2px;
+  padding-bottom: 0;
 }
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* 4. Banner */
 
-
 /*------------------------------------------------------------------------------------------*/
 
 #banner {
-    background-size: cover;
+  background-size: cover;
 }
 
 #banner-content.row {
-    padding-top: 50px;
-    padding-bottom: 170px;
+  padding-top: 50px;
+  padding-bottom: 170px;
 }
 
 #banner h1 {
-    padding-top: 5%;
+  padding-top: 5%;
 }
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* 5. Content Elements */
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* --------- 5.1 Icons ---------- */
 
-
 /*Font Icon sizes*/
 
 .fa-1x {
-    font-size: 15px !important;
+  font-size: 15px !important;
 }
 
-
 /*Icon Block*/
 
 .icon-block {
-    position: relative;
+  position: relative;
 }
 
 .icon-block h4 {
-    font-weight: bold;
-    padding-top: 0;
+  font-weight: bold;
+  padding-top: 0;
 }
 
 .icon-block .icon {
-    position: absolute;
+  position: absolute;
 }
 
 .icon-block p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
-
 /* Icon Left*/
 
 .icon-left .icon {
-    left: 15;
+  left: 15;
 }
 
 .icon-left .icon-block-description {
-    padding-left: 53px;
+  padding-left: 53px;
 }
 
-
 /* Icon Right */
 
 .icon-right .icon {
-    right: 15;
+  right: 15;
 }
 
 .icon-right .icon-block-description {
-    padding-right: 53px;
+  padding-right: 53px;
 }
 
-
 /* Icon Above */
 
 .icon-top {
-    display: block;
+  display: block;
 }
 
 .icon-top .icon {
-    position: relative;
-    display: block;
+  position: relative;
+  display: block;
 }
 
 .icon-top .icon-block-description {
-    padding-top: 25px;
+  padding-top: 25px;
 }
 
-
 /* --------- 5.2 Parallax Elements ---------- */
 
 .banner-parallax-1,
 .banner-parallax-2,
 .banner-parallax-3 {
-    min-height: 350px;
+  min-height: 350px;
 }
 
-
 /* --------- 5.3 Divider ---------- */
 
 .divider {
-    position: relative;
-    width: 40%;
-    height: 20px;
-    line-height: 20px;
-    margin: 10px auto 5px auto;
-    clear: both;
-    text-align: center;
+  position: relative;
+  width: 40%;
+  height: 20px;
+  line-height: 20px;
+  margin: 10px auto 5px auto;
+  clear: both;
+  text-align: center;
 }
 
 .divider-inner {
-    position: absolute;
-    height: 1px;
-    width: 100%;
-    top: 50%;
-    margin-top: -1px;
-    border-top: 1px solid;
-    border-color: #e1e1e1;
+  position: absolute;
+  height: 1px;
+  width: 100%;
+  top: 50%;
+  margin-top: -1px;
+  border-top: 1px solid;
+  border-color: #e1e1e1;
 }
 
 .divider i {
-    background: #fff;
-    position: relative;
-    top: -11px;
-    padding: 0 5px 0 5px;
-    color: #e1e1e1;
+  background: #fff;
+  position: relative;
+  top: -11px;
+  padding: 0 5px 0 5px;
+  color: #e1e1e1;
 }
 
 @media all {
-    .featherlight {
-        display: none;
-        /* dimensions: spanning the background from edge to edge */
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 2147483647;
-        /* z-index needs to be >= elements on the site. */
-        /* position: centering content */
-        text-align: center;
-        /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
-        white-space: nowrap;
-        /* styling */
-        cursor: pointer;
-        background: #333;
-        /* IE8 "hack" for nested featherlights */
-        background: rgba(0, 0, 0, 0);
-    }
-    /* support for nested featherlights. Does not work in IE8 (use JS to fix) */
-    .featherlight:last-of-type {
-        background: rgba(0, 0, 0, 0.8);
-    }
-    .featherlight:before {
-        /* position: trick to center content vertically */
-        content: '';
-        display: inline-block;
-        height: 100%;
-        vertical-align: middle;
-        margin-right: -0.25em;
-    }
-    .featherlight .featherlight-content {
-        /* position: centering vertical and horizontal */
-        text-align: left;
-        vertical-align: middle;
-        display: inline-block;
-        /* dimensions: cut off images */
-        overflow: auto;
-        padding: 25px 0;
-        border-bottom: 25px solid transparent;
-        /* dimensions: handling small or empty content */
-        min-width: 30%;
-        /* dimensions: handling large content */
-        margin-left: 5%;
-        margin-right: 5%;
-        max-height: 95%;
-        /* styling */
-        cursor: auto;
-        /* reset white-space wrapping */
-        white-space: normal;
-    }
-    /* contains the content */
-    .featherlight .featherlight-inner {
-        /* make sure its visible */
-        display: block;
-    }
-    .featherlight .featherlight-close-icon {
-        /* position: centering vertical and horizontal */
-        position: absolute;
-        z-index: 9999;
-        top: 25px;
-        right: 25px;
-        /* dimensions: 25px x 25px */
-        line-height: 25px;
-        width: 25px;
-        /* styling */
-        cursor: pointer;
-        text-align: center;
-        color: #fff;
-        font-family: "fontawesome";
-        font-size: 22px;
-        opacity: 0.5;
-        -webkit-transition: all 0.3s ease-out;
-        -moz-transition: all 0.3s ease-out;
-        -o-transition: all 0.3s ease-out;
-        transition: all 0.3s ease-out;
-    }
-    .featherlight .featherlight-close-icon:hover {
-        opacity: 1;
-    }
-    .featherlight .featherlight-image {
-        /* styling */
-        max-height: 100%;
-        max-width: 100%;
-    }
-    .featherlight-iframe .featherlight-content {
-        /* removed the border for image croping since iframe is edge to edge */
-        border-bottom: 0;
-        padding: 0;
-    }
-    .featherlight iframe {
-        /* styling */
-        border: none;
-    }
+  .featherlight {
+    display: none;
+    /* dimensions: spanning the background from edge to edge */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2147483647;
+    /* z-index needs to be >= elements on the site. */
+    /* position: centering content */
+    text-align: center;
+    /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
+    white-space: nowrap;
+    /* styling */
+    cursor: pointer;
+    background: #333;
+    /* IE8 "hack" for nested featherlights */
+    background: rgba(0, 0, 0, 0);
+  }
+  /* support for nested featherlights. Does not work in IE8 (use JS to fix) */
+  .featherlight:last-of-type {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .featherlight:before {
+    /* position: trick to center content vertically */
+    content: "";
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -0.25em;
+  }
+  .featherlight .featherlight-content {
+    /* position: centering vertical and horizontal */
+    text-align: left;
+    vertical-align: middle;
+    display: inline-block;
+    /* dimensions: cut off images */
+    overflow: auto;
+    padding: 25px 0;
+    border-bottom: 25px solid transparent;
+    /* dimensions: handling small or empty content */
+    min-width: 30%;
+    /* dimensions: handling large content */
+    margin-left: 5%;
+    margin-right: 5%;
+    max-height: 95%;
+    /* styling */
+    cursor: auto;
+    /* reset white-space wrapping */
+    white-space: normal;
+  }
+  /* contains the content */
+  .featherlight .featherlight-inner {
+    /* make sure its visible */
+    display: block;
+  }
+  .featherlight .featherlight-close-icon {
+    /* position: centering vertical and horizontal */
+    position: absolute;
+    z-index: 9999;
+    top: 25px;
+    right: 25px;
+    /* dimensions: 25px x 25px */
+    line-height: 25px;
+    width: 25px;
+    /* styling */
+    cursor: pointer;
+    text-align: center;
+    color: #fff;
+    font-family: "fontawesome";
+    font-size: 22px;
+    opacity: 0.5;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+  }
+  .featherlight .featherlight-close-icon:hover {
+    opacity: 1;
+  }
+  .featherlight .featherlight-image {
+    /* styling */
+    max-height: 100%;
+    max-width: 100%;
+  }
+  .featherlight-iframe .featherlight-content {
+    /* removed the border for image croping since iframe is edge to edge */
+    border-bottom: 0;
+    padding: 0;
+  }
+  .featherlight iframe {
+    /* styling */
+    border: none;
+  }
 }
 
-
 /* handling phones and small screens */
 
 @media only screen and (max-width: 1024px) {
-    .featherlight .featherlight-content {
-        /* dimensions: maximize lightbox with for small screens */
-        margin-left: 10px;
-        margin-right: 10px;
-        max-height: 98%;
-        padding: 10px 10px 0;
-        border-bottom: 10px solid transparent;
-    }
+  .featherlight .featherlight-content {
+    /* dimensions: maximize lightbox with for small screens */
+    margin-left: 10px;
+    margin-right: 10px;
+    max-height: 98%;
+    padding: 10px 10px 0;
+    border-bottom: 10px solid transparent;
+  }
 }
 
-
 /* Gallery Styling */
 
 @media all {
-    .featherlight-next,
-    .featherlight-previous {
-        font-family: "fontawesome";
-        font-size: 22px;
-        display: block;
-        position: absolute;
-        top: 25px;
-        right: 0;
-        bottom: 0;
-        left: 80%;
-        cursor: pointer;
-        /* preventing text selection */
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        /* IE9 hack, otherwise navigation doesn't appear */
-        background: rgba(0, 0, 0, 0);
-        -webkit-transition: all 0.3s ease-out;
-        -moz-transition: all 0.3s ease-out;
-        -o-transition: all 0.3s ease-out;
-        transition: all 0.3s ease-out;
-    }
-    .featherlight-previous {
-        left: 0;
-        right: 80%;
-    }
-    .featherlight-next span,
-    .featherlight-previous span {
-        display: inline-block;
-        opacity: 0.3;
-        position: absolute;
-        top: 50%;
-        width: 100%;
-        font-size: 80px;
-        line-height: 80px;
-        /* center vertically */
-        margin-top: -40px;
-        color: #fff;
-        font-style: normal;
-        font-weight: normal;
-        -webkit-transition: all 0.3s ease-out;
-        -moz-transition: all 0.3s ease-out;
-        -o-transition: all 0.3s ease-out;
-        transition: all 0.3s ease-out;
-    }
-    .featherlight-next span {
-        text-align: right;
-        left: auto;
-        right: 7%;
-    }
-    .featherlight-previous span {
-        text-align: left;
-        left: 7%;
-    }
-    .featherlight-next:hover span,
-    .featherlight-previous:hover span {
-        display: inline-block;
-        opacity: 1;
-    }
-    /* Hide navigation while loading */
-    .featherlight-loading .featherlight-previous,
-    .featherlight-loading .featherlight-next {
-        display: none;
-    }
+  .featherlight-next,
+  .featherlight-previous {
+    font-family: "fontawesome";
+    font-size: 22px;
+    display: block;
+    position: absolute;
+    top: 25px;
+    right: 0;
+    bottom: 0;
+    left: 80%;
+    cursor: pointer;
+    /* preventing text selection */
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    /* IE9 hack, otherwise navigation doesn't appear */
+    background: rgba(0, 0, 0, 0);
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+  }
+  .featherlight-previous {
+    left: 0;
+    right: 80%;
+  }
+  .featherlight-next span,
+  .featherlight-previous span {
+    display: inline-block;
+    opacity: 0.3;
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    font-size: 80px;
+    line-height: 80px;
+    /* center vertically */
+    margin-top: -40px;
+    color: #fff;
+    font-style: normal;
+    font-weight: normal;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+  }
+  .featherlight-next span {
+    text-align: right;
+    left: auto;
+    right: 7%;
+  }
+  .featherlight-previous span {
+    text-align: left;
+    left: 7%;
+  }
+  .featherlight-next:hover span,
+  .featherlight-previous:hover span {
+    display: inline-block;
+    opacity: 1;
+  }
+  /* Hide navigation while loading */
+  .featherlight-loading .featherlight-previous,
+  .featherlight-loading .featherlight-next {
+    display: none;
+  }
 }
 
-
 /* Always display arrows on touch devices */
 
 @media only screen and (max-device-width: 1024px) {
-    .featherlight-next:hover,
-    .featherlight-previous:hover {
-        background: none;
-    }
-    .featherlight-next span,
-    .featherlight-previous span {
-        display: block;
-    }
+  .featherlight-next:hover,
+  .featherlight-previous:hover {
+    background: none;
+  }
+  .featherlight-next span,
+  .featherlight-previous span {
+    display: block;
+  }
 }
 
-
 /* handling phones and small screens */
 
 @media only screen and (max-width: 1024px) {
-    .featherlight-next,
-    .featherlight-previous {
-        top: 10px;
-        right: 10px;
-        left: 85%;
-    }
-    .featherlight-previous {
-        left: 10px;
-        right: 85%;
-    }
-    .featherlight-next span,
-    .featherlight-previous span {
-        margin-top: -30px;
-        font-size: 40px;
-    }
+  .featherlight-next,
+  .featherlight-previous {
+    top: 10px;
+    right: 10px;
+    left: 85%;
+  }
+  .featherlight-previous {
+    left: 10px;
+    right: 85%;
+  }
+  .featherlight-next span,
+  .featherlight-previous span {
+    margin-top: -30px;
+    font-size: 40px;
+  }
 }
 
 .loader {
-    z-index: 999999;
-    width: 94px;
-    height: 77px;
-    position: relative;
-    top: 20%;
-    left: 50%;
+  z-index: 999999;
+  width: 94px;
+  height: 77px;
+  position: relative;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  backface-visibility: hidden;
+  display: none;
+  span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 20px;
+    background-color: #ff8c4a6f;
+    z-index: 1;
+    transform: translateY(135%);
+    animation: move 2s cubic-bezier(0.15, 0.44, 0.76, 0.64);
+    /* Adjust the animation duration here */
+    animation-iteration-count: infinite;
+  }
+  > div {
+    z-index: 1;
+    position: absolute;
+    left: 50%;
+    top: 50%;
     transform: translate(-50%, -50%);
+    width: 48%;
     backface-visibility: hidden;
-    display: none;
-    span {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 20px;
-        background-color: #ff8c4a6f;
-        z-index: 1;
-        transform: translateY(135%);
-        animation: move 2s cubic-bezier(0.15, 0.44, 0.76, 0.64);
-        /* Adjust the animation duration here */
-        animation-iteration-count: infinite;
+  }
+  i {
+    display: block;
+    height: 1px;
+    background: #000;
+    margin: 0 auto 2px;
+    margin: 0 auto 2.2px;
+    backface-visibility: hidden;
+    &:nth-child(2) {
+      width: 75%;
     }
-    >div {
-        z-index: 1;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 48%;
-        backface-visibility: hidden;
+    &:nth-child(3) {
+      width: 81%;
     }
-    i {
-        display: block;
-        height: 1px;
-        background: #000;
-        margin: 0 auto 2px;
-        margin: 0 auto 2.2px;
-        backface-visibility: hidden;
-        &:nth-child(2) {
-            width: 75%;
-        }
-        &:nth-child(3) {
-            width: 81%;
-        }
-        &:nth-child(4) {
-            width: 87%;
-        }
-        &:nth-child(6) {
-            width: 71%;
-        }
-        &:nth-child(7) {
-            width: 81%;
-        }
-        &:nth-child(8) {
-            width: 65%;
-        }
-        &:nth-child(9) {
-            width: 83%;
-        }
-        &:nth-child(10) {
-            width: 75%;
-        }
-        &:nth-child(12) {
-            width: 86%;
-        }
-        &:nth-child(14) {
-            width: 65%;
-        }
-        &:nth-child(16) {
-            width: 75%;
-        }
-        &:nth-child(18) {
-            width: 83%;
-        }
+    &:nth-child(4) {
+      width: 87%;
     }
-    &:before,
-    &:after,
-    em:after,
-    em:before {
-        border-color: #000;
-        content: "";
-        position: absolute;
-        width: 19px;
-        height: 16px;
-        border-style: solid;
-        border-width: 0px;
+    &:nth-child(6) {
+      width: 71%;
     }
-    &:before {
-        left: 0;
-        top: 0;
-        border-left-width: 1px;
-        border-top-width: 1px;
+    &:nth-child(7) {
+      width: 81%;
     }
-    &:after {
-        right: 0;
-        top: 0;
-        border-right-width: 1px;
-        border-top-width: 1px;
+    &:nth-child(8) {
+      width: 65%;
     }
-    em:before {
-        left: 0;
-        bottom: 0;
-        border-left-width: 1px;
-        border-bottom-width: 1px;
+    &:nth-child(9) {
+      width: 83%;
     }
-    em:after {
-        right: 0;
-        bottom: 0;
-        border-right-width: 1px;
-        border-bottom-width: 1px;
+    &:nth-child(10) {
+      width: 75%;
     }
-}
-
-@keyframes move {
-    0%,
-    100% {
-        transform: translateY(0%);
+    &:nth-child(12) {
+      width: 86%;
     }
-    25% {
-        transform: translateY(135%);
+    &:nth-child(14) {
+      width: 65%;
     }
-    50% {
-        transform: translateY(272%);
+    &:nth-child(16) {
+      width: 75%;
     }
-    75% {
-        transform: translateY(135%);
+    &:nth-child(18) {
+      width: 83%;
     }
+  }
+  &:before,
+  &:after,
+  em:after,
+  em:before {
+    border-color: #000;
+    content: "";
+    position: absolute;
+    width: 19px;
+    height: 16px;
+    border-style: solid;
+    border-width: 0px;
+  }
+  &:before {
+    left: 0;
+    top: 0;
+    border-left-width: 1px;
+    border-top-width: 1px;
+  }
+  &:after {
+    right: 0;
+    top: 0;
+    border-right-width: 1px;
+    border-top-width: 1px;
+  }
+  em:before {
+    left: 0;
+    bottom: 0;
+    border-left-width: 1px;
+    border-bottom-width: 1px;
+  }
+  em:after {
+    right: 0;
+    bottom: 0;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+  }
 }
 
+@keyframes move {
+  0%,
+  100% {
+    transform: translateY(0%);
+  }
+  25% {
+    transform: translateY(135%);
+  }
+  50% {
+    transform: translateY(272%);
+  }
+  75% {
+    transform: translateY(135%);
+  }
+}
 
 /*Preloader*/
 
 .ocrloader {
-    z-index: 999999;
-    width: 94px;
-    height: 77px;
+  z-index: 999999;
+  width: 94px;
+  height: 77px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  backface-visibility: hidden;
+  span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 20px;
+    background-color: #ff8c4a6f;
+    z-index: 1;
+    transform: translateY(135%);
+    animation: move 2s cubic-bezier(0.15, 0.44, 0.76, 0.64);
+    /* Adjust the animation duration here */
+    animation-iteration-count: infinite;
+  }
+  > div {
+    z-index: 1;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    width: 48%;
     backface-visibility: hidden;
-    span {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 20px;
-        background-color: #ff8c4a6f;
-        z-index: 1;
-        transform: translateY(135%);
-        animation: move 2s cubic-bezier(0.15, 0.44, 0.76, 0.64);
-        /* Adjust the animation duration here */
-        animation-iteration-count: infinite;
+  }
+  i {
+    display: block;
+    height: 1px;
+    background: #000;
+    margin: 0 auto 2px;
+    margin: 0 auto 2.2px;
+    backface-visibility: hidden;
+    &:nth-child(2) {
+      width: 75%;
     }
-    >div {
-        z-index: 1;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 48%;
-        backface-visibility: hidden;
+    &:nth-child(3) {
+      width: 81%;
     }
-    i {
-        display: block;
-        height: 1px;
-        background: #000;
-        margin: 0 auto 2px;
-        margin: 0 auto 2.2px;
-        backface-visibility: hidden;
-        &:nth-child(2) {
-            width: 75%;
-        }
-        &:nth-child(3) {
-            width: 81%;
-        }
-        &:nth-child(4) {
-            width: 87%;
-        }
-        &:nth-child(6) {
-            width: 71%;
-        }
-        &:nth-child(7) {
-            width: 81%;
-        }
-        &:nth-child(8) {
-            width: 65%;
-        }
-        &:nth-child(9) {
-            width: 83%;
-        }
-        &:nth-child(10) {
-            width: 75%;
-        }
-        &:nth-child(12) {
-            width: 86%;
-        }
-        &:nth-child(14) {
-            width: 65%;
-        }
-        &:nth-child(16) {
-            width: 75%;
-        }
-        &:nth-child(18) {
-            width: 83%;
-        }
+    &:nth-child(4) {
+      width: 87%;
     }
-    &:before,
-    &:after,
-    em:after,
-    em:before {
-        border-color: #000;
-        content: "";
-        position: absolute;
-        width: 19px;
-        height: 16px;
-        border-style: solid;
-        border-width: 0px;
+    &:nth-child(6) {
+      width: 71%;
     }
-    &:before {
-        left: 0;
-        top: 0;
-        border-left-width: 1px;
-        border-top-width: 1px;
+    &:nth-child(7) {
+      width: 81%;
     }
-    &:after {
-        right: 0;
-        top: 0;
-        border-right-width: 1px;
-        border-top-width: 1px;
+    &:nth-child(8) {
+      width: 65%;
     }
-    em:before {
-        left: 0;
-        bottom: 0;
-        border-left-width: 1px;
-        border-bottom-width: 1px;
+    &:nth-child(9) {
+      width: 83%;
     }
-    em:after {
-        right: 0;
-        bottom: 0;
-        border-right-width: 1px;
-        border-bottom-width: 1px;
+    &:nth-child(10) {
+      width: 75%;
     }
-}
-
-@keyframes move {
-    0%,
-    100% {
-        transform: translateY(0%);
+    &:nth-child(12) {
+      width: 86%;
     }
-    25% {
-        transform: translateY(135%);
+    &:nth-child(14) {
+      width: 65%;
     }
-    50% {
-        transform: translateY(272%);
+    &:nth-child(16) {
+      width: 75%;
     }
-    75% {
-        transform: translateY(135%);
+    &:nth-child(18) {
+      width: 83%;
     }
+  }
+  &:before,
+  &:after,
+  em:after,
+  em:before {
+    border-color: #000;
+    content: "";
+    position: absolute;
+    width: 19px;
+    height: 16px;
+    border-style: solid;
+    border-width: 0px;
+  }
+  &:before {
+    left: 0;
+    top: 0;
+    border-left-width: 1px;
+    border-top-width: 1px;
+  }
+  &:after {
+    right: 0;
+    top: 0;
+    border-right-width: 1px;
+    border-top-width: 1px;
+  }
+  em:before {
+    left: 0;
+    bottom: 0;
+    border-left-width: 1px;
+    border-bottom-width: 1px;
+  }
+  em:after {
+    right: 0;
+    bottom: 0;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+  }
 }
 
+@keyframes move {
+  0%,
+  100% {
+    transform: translateY(0%);
+  }
+  25% {
+    transform: translateY(135%);
+  }
+  50% {
+    transform: translateY(272%);
+  }
+  75% {
+    transform: translateY(135%);
+  }
+}
 
 /*!
  * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
@@ -1368,1246 +1320,1236 @@ h6 {
  */
 
 .la-ball-triangle-path,
-.la-ball-triangle-path>div {
-    position: relative;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+.la-ball-triangle-path > div {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .la-ball-triangle-path {
-    display: block;
-    font-size: 0;
-    color: #fff;
+  display: block;
+  font-size: 0;
+  color: #fff;
 }
 
 .la-ball-triangle-path.la-dark {
-    color: #333;
+  color: #333;
 }
 
-.la-ball-triangle-path>div {
-    display: inline-block;
-    float: none;
-    background-color: currentColor;
-    border: 0 solid currentColor;
+.la-ball-triangle-path > div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
 }
 
 .la-ball-triangle-path {
-    width: 32px;
-    height: 32px;
+  width: 32px;
+  height: 32px;
 }
 
-.la-ball-triangle-path>div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 10px;
-    height: 10px;
-    border-radius: 100%;
+.la-ball-triangle-path > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
 }
 
-.la-ball-triangle-path>div:nth-child(1) {
-    -webkit-animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
-    -moz-animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
-    -o-animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
-    animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
+.la-ball-triangle-path > div:nth-child(1) {
+  -webkit-animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
+  -moz-animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
+  -o-animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
+  animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
 }
 
-.la-ball-triangle-path>div:nth-child(2) {
-    -webkit-animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
-    -moz-animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
-    -o-animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
-    animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
+.la-ball-triangle-path > div:nth-child(2) {
+  -webkit-animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
+  -moz-animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
+  -o-animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
+  animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
 }
 
-.la-ball-triangle-path>div:nth-child(3) {
-    -webkit-animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
-    -moz-animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
-    -o-animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
-    animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
+.la-ball-triangle-path > div:nth-child(3) {
+  -webkit-animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
+  -moz-animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
+  -o-animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
+  animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
 }
 
 .la-ball-triangle-path.la-sm {
-    width: 16px;
-    height: 16px;
+  width: 16px;
+  height: 16px;
 }
 
-.la-ball-triangle-path.la-sm>div {
-    width: 4px;
-    height: 4px;
+.la-ball-triangle-path.la-sm > div {
+  width: 4px;
+  height: 4px;
 }
 
 .la-ball-triangle-path.la-2x {
-    width: 64px;
-    height: 64px;
+  width: 64px;
+  height: 64px;
 }
 
-.la-ball-triangle-path.la-2x>div {
-    width: 20px;
-    height: 20px;
+.la-ball-triangle-path.la-2x > div {
+  width: 20px;
+  height: 20px;
 }
 
 .la-ball-triangle-path.la-3x {
-    width: 96px;
-    height: 96px;
+  width: 96px;
+  height: 96px;
 }
 
-.la-ball-triangle-path.la-3x>div {
-    width: 30px;
-    height: 30px;
+.la-ball-triangle-path.la-3x > div {
+  width: 30px;
+  height: 30px;
 }
 
-
 /*
  * Animations
  */
 
 @-webkit-keyframes ball-triangle-path-ball-one {
-    0% {
-        -webkit-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -webkit-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -webkit-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
+  0% {
+    -webkit-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -webkit-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -webkit-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
 }
 
 @-moz-keyframes ball-triangle-path-ball-one {
-    0% {
-        -moz-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -moz-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -moz-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -moz-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
+  0% {
+    -moz-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -moz-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -moz-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
 }
 
 @-o-keyframes ball-triangle-path-ball-one {
-    0% {
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
+  0% {
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
 }
 
 @keyframes ball-triangle-path-ball-one {
-    0% {
-        -webkit-transform: translate(0, 220%);
-        -moz-transform: translate(0, 220%);
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -webkit-transform: translate(110%, 0);
-        -moz-transform: translate(110%, 0);
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -webkit-transform: translate(220%, 220%);
-        -moz-transform: translate(220%, 220%);
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(0, 220%);
-        -moz-transform: translate(0, 220%);
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
+  0% {
+    -webkit-transform: translate(0, 220%);
+    -moz-transform: translate(0, 220%);
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -webkit-transform: translate(110%, 0);
+    -moz-transform: translate(110%, 0);
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -webkit-transform: translate(220%, 220%);
+    -moz-transform: translate(220%, 220%);
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(0, 220%);
+    -moz-transform: translate(0, 220%);
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
 }
 
 @-webkit-keyframes ball-triangle-path-ball-two {
-    0% {
-        -webkit-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -webkit-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -webkit-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
+  0% {
+    -webkit-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -webkit-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -webkit-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
 }
 
 @-moz-keyframes ball-triangle-path-ball-two {
-    0% {
-        -moz-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -moz-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -moz-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -moz-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
+  0% {
+    -moz-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -moz-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -moz-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
 }
 
 @-o-keyframes ball-triangle-path-ball-two {
-    0% {
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
+  0% {
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
 }
 
 @keyframes ball-triangle-path-ball-two {
-    0% {
-        -webkit-transform: translate(110%, 0);
-        -moz-transform: translate(110%, 0);
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -webkit-transform: translate(220%, 220%);
-        -moz-transform: translate(220%, 220%);
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -webkit-transform: translate(0, 220%);
-        -moz-transform: translate(0, 220%);
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(110%, 0);
-        -moz-transform: translate(110%, 0);
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
+  0% {
+    -webkit-transform: translate(110%, 0);
+    -moz-transform: translate(110%, 0);
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -webkit-transform: translate(220%, 220%);
+    -moz-transform: translate(220%, 220%);
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -webkit-transform: translate(0, 220%);
+    -moz-transform: translate(0, 220%);
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(110%, 0);
+    -moz-transform: translate(110%, 0);
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
 }
 
 @-webkit-keyframes ball-triangle-path-ball-tree {
-    0% {
-        -webkit-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -webkit-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -webkit-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
+  0% {
+    -webkit-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -webkit-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -webkit-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
 }
 
 @-moz-keyframes ball-triangle-path-ball-tree {
-    0% {
-        -moz-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -moz-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -moz-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -moz-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
+  0% {
+    -moz-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -moz-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -moz-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
 }
 
 @-o-keyframes ball-triangle-path-ball-tree {
-    0% {
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
+  0% {
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
 }
 
 @keyframes ball-triangle-path-ball-tree {
-    0% {
-        -webkit-transform: translate(220%, 220%);
-        -moz-transform: translate(220%, 220%);
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
-    17% {
-        opacity: .25;
-    }
-    33% {
-        opacity: 1;
-        -webkit-transform: translate(0, 220%);
-        -moz-transform: translate(0, 220%);
-        -o-transform: translate(0, 220%);
-        transform: translate(0, 220%);
-    }
-    50% {
-        opacity: .25;
-    }
-    66% {
-        opacity: 1;
-        -webkit-transform: translate(110%, 0);
-        -moz-transform: translate(110%, 0);
-        -o-transform: translate(110%, 0);
-        transform: translate(110%, 0);
-    }
-    83% {
-        opacity: .25;
-    }
-    100% {
-        opacity: 1;
-        -webkit-transform: translate(220%, 220%);
-        -moz-transform: translate(220%, 220%);
-        -o-transform: translate(220%, 220%);
-        transform: translate(220%, 220%);
-    }
+  0% {
+    -webkit-transform: translate(220%, 220%);
+    -moz-transform: translate(220%, 220%);
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
+  17% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+    -webkit-transform: translate(0, 220%);
+    -moz-transform: translate(0, 220%);
+    -o-transform: translate(0, 220%);
+    transform: translate(0, 220%);
+  }
+  50% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+    -webkit-transform: translate(110%, 0);
+    -moz-transform: translate(110%, 0);
+    -o-transform: translate(110%, 0);
+    transform: translate(110%, 0);
+  }
+  83% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate(220%, 220%);
+    -moz-transform: translate(220%, 220%);
+    -o-transform: translate(220%, 220%);
+    transform: translate(220%, 220%);
+  }
 }
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* Responsive Elements */
 
-
 /*------------------------------------------------------------------------------------------*/
 
-
 /* =Media Queries for Nav
 ===============================*/
 
 @media all and (max-width: 1024px) {
-    #nav-trigger {
-        display: block;
-    }
-    nav#nav-main {
-        display: none;
-    }
-    nav#nav-mobile {
-        display: block;
-    }
-    nav#nav-mobile li {
-        display: block;
-    }
-    #header aside {
-        display: none;
-    }
+  #nav-trigger {
+    display: block;
+  }
+  nav#nav-main {
+    display: none;
+  }
+  nav#nav-mobile {
+    display: block;
+  }
+  nav#nav-mobile li {
+    display: block;
+  }
+  #header aside {
+    display: none;
+  }
 }
 
-
 /* Landscape mobile & down
 ===============================*/
 
 @media (max-width: 480px) {
-    #wrapper {
-        margin: 0;
-        padding: 0;
-    }
-    .page-border,
-    #scrollUp,
-    #scrollUp:before {
-        display: none;
-    }
-    .row {
-        padding: 15px !important;
-    }
-    .col-1,
-    .col-2,
-    .col-3,
-    .col-4,
-    .col-5,
-    .col-6,
-    .col-7,
-    .col-8,
-    .col-9,
-    .col-10,
-    .col-11,
-    .col-12,
-    .col-2-3,
-    .col-3-4,
-    .col-9-10,
-    .col-61,
-    .col-38,
-    .row {
-        width: 100%;
-    }
-    .col-1,
-    .col-2,
-    .col-3,
-    .col-4,
-    .col-5,
-    .col-6,
-    .col-7,
-    .col-8,
-    .col-9,
-    .col-10,
-    .col-11,
-    .col-12,
-    .col-2-3,
-    .col-3-4,
-    .col-9-10,
-    .col-61,
-    .col-38 {
-        padding-right: 0;
-        padding-left: 0;
-    }
-    /*-----------------Header Elements-----------------*/
-    #header .row {
-        padding: 0 15px !important;
-    }
-    #header.nav-solid [class*="col-"] {
-        padding: 0;
-    }
-    /*Logo*/
-    #logo h2 {
-        padding: 0;
-    }
-    /* Social */
-    #header aside {
-        clear: both;
-        padding: 0;
-    }
-    #header ul.social-icons {
-        margin-top: 0;
-    }
-    #banner-content.row {
-        padding-top: 85px !important;
-    }
-    /*-----------------Sections-----------------*/
-    /* Call to Action*/
-    .call-to-action {
-        padding-bottom: 25px;
-    }
-    /* Video */
-    .slvj-lightbox iframe,
-    .slvj-lightbox object,
-    .slvj-lightbox embed {
-        height: 270px !important;
-    }
-    /* Footer */
-    #landing-footer #copyright {
-        float: left;
-        width: 50%;
-    }
-    #landing-footer .social-icons {
-        float: right;
-        width: 50%;
-    }
-    /*-----------------Typography-----------------*/
-    h1 {
-        font-size: 38px;
-    }
-    #banner h1 {
-        font-size: 48px;
-    }
-    /* Hide Elements */
-    a#scrollUp {
-        display: none !important;
-    }
+  #wrapper {
+    margin: 0;
+    padding: 0;
+  }
+  .page-border,
+  #scrollUp,
+  #scrollUp:before {
+    display: none;
+  }
+  .row {
+    padding: 15px !important;
+  }
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10,
+  .col-11,
+  .col-12,
+  .col-2-3,
+  .col-3-4,
+  .col-9-10,
+  .col-61,
+  .col-38,
+  .row {
+    width: 100%;
+  }
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10,
+  .col-11,
+  .col-12,
+  .col-2-3,
+  .col-3-4,
+  .col-9-10,
+  .col-61,
+  .col-38 {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  /*-----------------Header Elements-----------------*/
+  #header .row {
+    padding: 0 15px !important;
+  }
+  #header.nav-solid [class*="col-"] {
+    padding: 0;
+  }
+  /*Logo*/
+  #logo h2 {
+    padding: 0;
+  }
+  /* Social */
+  #header aside {
+    clear: both;
+    padding: 0;
+  }
+  #header ul.social-icons {
+    margin-top: 0;
+  }
+  #banner-content.row {
+    padding-top: 85px !important;
+  }
+  /*-----------------Sections-----------------*/
+  /* Call to Action*/
+  .call-to-action {
+    padding-bottom: 25px;
+  }
+  /* Video */
+  .slvj-lightbox iframe,
+  .slvj-lightbox object,
+  .slvj-lightbox embed {
+    height: 270px !important;
+  }
+  /* Footer */
+  #landing-footer #copyright {
+    float: left;
+    width: 50%;
+  }
+  #landing-footer .social-icons {
+    float: right;
+    width: 50%;
+  }
+  /*-----------------Typography-----------------*/
+  h1 {
+    font-size: 38px;
+  }
+  #banner h1 {
+    font-size: 48px;
+  }
+  /* Hide Elements */
+  a#scrollUp {
+    display: none !important;
+  }
 }
 
-
 /* Mobile to Tablet Portrait
 ===============================*/
 
 @media (min-width: 480px) and (max-width: 767px) {
-    #wrapper {
-        margin: 0;
-        padding: 0;
-    }
-    .page-border,
-    #scrollUp,
-    #scrollUp:before {
-        display: none;
-    }
-    .row {
-        padding: 15px 0 !important;
-    }
-    .col-1,
-    .col-2,
-    .col-5,
-    .col-7,
-    .col-9,
-    .col-11,
-    .col-2-3,
-    .col-3-4,
-    .col-61,
-    .col-38,
-    .row {
-        width: 100%;
-    }
-    .col-3,
-    .col-4,
-    .col-6,
-    .col-8,
-    .col-10,
-    .col-12 {
-        width: 50%;
-    }
-    /*-----------------Header Elements-----------------*/
-    #header .row {
-        padding: 0 !important;
-    }
-    #header aside {
-        display: inline-block;
-        position: absolute;
-        top: 40px;
-        right: 60px;
-        padding-top: 3px;
-        padding-right: 5px;
-    }
-    #header.nav-solid aside {
-        top: 20px;
-    }
-    #header aside ul {
-        margin-top: 0 !important;
-        padding-top: 6px;
-    }
-    #banner-content.row {
-        padding-top: 85px !important;
-    }
-    /*Navigation*/
-    nav#nav-mobile ul {
-        margin-left: -40px;
-        margin-right: -40px;
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-    /*-----------------Sections-----------------*/
-    /* Video */
-    .slvj-lightbox iframe,
-    .slvj-lightbox object,
-    .slvj-lightbox embed {
-        height: 370px !important;
-    }
-    /* Footer */
-    #landing-footer #copyright {
-        float: left;
-        width: 50%;
-    }
-    #landing-footer .social-icons {
-        float: right;
-        width: 50%;
-    }
+  #wrapper {
+    margin: 0;
+    padding: 0;
+  }
+  .page-border,
+  #scrollUp,
+  #scrollUp:before {
+    display: none;
+  }
+  .row {
+    padding: 15px 0 !important;
+  }
+  .col-1,
+  .col-2,
+  .col-5,
+  .col-7,
+  .col-9,
+  .col-11,
+  .col-2-3,
+  .col-3-4,
+  .col-61,
+  .col-38,
+  .row {
+    width: 100%;
+  }
+  .col-3,
+  .col-4,
+  .col-6,
+  .col-8,
+  .col-10,
+  .col-12 {
+    width: 50%;
+  }
+  /*-----------------Header Elements-----------------*/
+  #header .row {
+    padding: 0 !important;
+  }
+  #header aside {
+    display: inline-block;
+    position: absolute;
+    top: 40px;
+    right: 60px;
+    padding-top: 3px;
+    padding-right: 5px;
+  }
+  #header.nav-solid aside {
+    top: 20px;
+  }
+  #header aside ul {
+    margin-top: 0 !important;
+    padding-top: 6px;
+  }
+  #banner-content.row {
+    padding-top: 85px !important;
+  }
+  /*Navigation*/
+  nav#nav-mobile ul {
+    margin-left: -40px;
+    margin-right: -40px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  /*-----------------Sections-----------------*/
+  /* Video */
+  .slvj-lightbox iframe,
+  .slvj-lightbox object,
+  .slvj-lightbox embed {
+    height: 370px !important;
+  }
+  /* Footer */
+  #landing-footer #copyright {
+    float: left;
+    width: 50%;
+  }
+  #landing-footer .social-icons {
+    float: right;
+    width: 50%;
+  }
 }
 
-
 /* Landscape Tablet to Desktop
 ===============================*/
 
 @media (min-width: 768px) and (max-width: 1024px) {
-    #wrapper {
-        margin: 0;
-        padding: 0;
-    }
-    .page-border {
-        display: none;
-    }
-    .big-padding-top {
-        padding-top: 45px !important;
-    }
-    /*-----------------Header Elements-----------------*/
-    #header aside {
-        display: inline-block;
-        position: absolute;
-        top: 40px;
-        right: 60px;
-        padding-top: 3px;
-        padding-right: 5px;
-    }
-    #header.nav-solid aside {
-        top: 20px;
-    }
-    #header aside ul {
-        margin-top: 0 !important;
-        padding-top: 6px;
-    }
-    /*Navigation*/
-    nav#nav-mobile ul {
-        margin-left: -40px;
-        margin-right: -40px;
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-    /*-----------------Sections-----------------*/
-    /* Video */
-    .slvj-lightbox object,
-    .slvj-lightbox embed {
-        height: 432px !important;
-    }
-}
-
-@import 'https://fonts.googleapis.com/css?family=Montserrat:800|Poppins:400';
-.wall {
+  #wrapper {
+    margin: 0;
+    padding: 0;
+  }
+  .page-border {
+    display: none;
+  }
+  .big-padding-top {
+    padding-top: 45px !important;
+  }
+  /*-----------------Header Elements-----------------*/
+  #header aside {
+    display: inline-block;
     position: absolute;
-    width: 100vw;
-    height: 100vh;
-    background-color: #fff;
+    top: 40px;
+    right: 60px;
+    padding-top: 3px;
+    padding-right: 5px;
+  }
+  #header.nav-solid aside {
+    top: 20px;
+  }
+  #header aside ul {
+    margin-top: 0 !important;
+    padding-top: 6px;
+  }
+  /*Navigation*/
+  nav#nav-mobile ul {
+    margin-left: -40px;
+    margin-right: -40px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  /*-----------------Sections-----------------*/
+  /* Video */
+  .slvj-lightbox object,
+  .slvj-lightbox embed {
+    height: 432px !important;
+  }
+}
+
+@import "https://fonts.googleapis.com/css?family=Montserrat:800|Poppins:400";
+.wall {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
 }
 
 .row1 {
-    z-index: -9999999;
-    display: flex;
-    animation: 200s linear ticker-to-left infinite;
+  z-index: -9999999;
+  display: flex;
+  animation: 200s linear ticker-to-left infinite;
 }
 
 .row1:nth-child(even) {
-    animation: 60s linear ticker-to-right infinite;
-    justify-content: flex-end;
+  animation: 60s linear ticker-to-right infinite;
+  justify-content: flex-end;
 }
 
 .row1 span {
-    margin-right: 0.2em;
-    font-family: sans-serif;
-    color: transparent;
-    font-size: 20vh;
-    font-weight: bold;
-    line-height: 1;
-    text-transform: uppercase;
-    -webkit-text-stroke-width: 4px;
-    text-stroke-width: 4px;
-    -webkit-text-stroke-color: #f5f5f599;
-    text-stroke-color: #f5f5f599;
+  margin-right: 0.2em;
+  font-family: sans-serif;
+  color: transparent;
+  font-size: 20vh;
+  font-weight: bold;
+  line-height: 1;
+  text-transform: uppercase;
+  -webkit-text-stroke-width: 4px;
+  text-stroke-width: 4px;
+  -webkit-text-stroke-color: #f5f5f599;
+  text-stroke-color: #f5f5f599;
 }
 
 @keyframes ticker-to-left {
-    0% {
-        transform: translate3d(0, 0, 0);
-    }
-    100% {
-        transform: translate3d(-100%, 0, 0);
-    }
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 
 @keyframes ticker-to-right {
-    0% {
-        transform: translate3d(0, 0, 0);
-    }
-    100% {
-        transform: translate3d(100%, 0, 0);
-    }
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
 }
 
 .container {
-    max-width: 500px;
-    max-height: 400px;
-    width: 100%;
-    padding: 25px;
-    background: rgb(255 255 255 / 0%);
-    box-shadow: 0 8px 32px 0 rgba(154, 154, 154, 0.37);
-    backdrop-filter: blur(2.2px);
-    -webkit-backdrop-filter: blur(2.2px);
-    border-radius: 12px;
-    border: 1px solid rgba(52, 52, 52, 0.195);
+  max-width: 500px;
+  max-height: 400px;
+  width: 100%;
+  padding: 25px;
+  background: rgb(255 255 255 / 0%);
+  box-shadow: 0 8px 32px 0 rgba(154, 154, 154, 0.37);
+  backdrop-filter: blur(2.2px);
+  -webkit-backdrop-filter: blur(2.2px);
+  border-radius: 12px;
+  border: 1px solid rgba(52, 52, 52, 0.195);
 }
 
 .uploadbuttons {
-    display: flex;
-    justify-content: flex-start;
+  display: flex;
+  justify-content: flex-start;
 }
 
 .container:hover {
-    background: rgb(255 93 0 / 11%);
-    /* Adjust the alpha value for the desired transparency */
-    box-shadow: 0 8px 32px 0 rgba(154, 154, 154, 0.37);
-    backdrop-filter: blur(2.2px);
-    -webkit-backdrop-filter: blur(2.2px);
-    border: 1px solid rgba(103, 101, 101, 0.195);
-    transition: all .4s ease-in-out;
+  background: rgb(255 93 0 / 11%);
+  /* Adjust the alpha value for the desired transparency */
+  box-shadow: 0 8px 32px 0 rgba(154, 154, 154, 0.37);
+  backdrop-filter: blur(2.2px);
+  -webkit-backdrop-filter: blur(2.2px);
+  border: 1px solid rgba(103, 101, 101, 0.195);
+  transition: all 0.4s ease-in-out;
 }
 
 .drag-area {
-    height: 200px;
-    border: 3px dashed rgba(128, 128, 128, 0.263);
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    padding: 0px 50px;
+  height: 200px;
+  border: 3px dashed rgba(128, 128, 128, 0.263);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0px 50px;
 }
 
 .drag-area:hover {
-    height: 200px;
-    border: 3px dashed #ff8c4a5a;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
+  height: 200px;
+  border: 3px dashed #ff8c4a5a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 h3 {
-    margin-bottom: 20px;
-    font-weight: 500;
+  margin-bottom: 20px;
+  font-weight: 500;
 }
 
 .drag-area .icon {
-    font-size: 50px;
-    width: 60px;
-    height: 60px;
+  font-size: 50px;
+  width: 60px;
+  height: 60px;
 }
 
 .drag-area .headerx {
-    font-size: 17px;
-    font-weight: 500;
-    color: #34495e;
+  font-size: 17px;
+  font-weight: 500;
+  color: #34495e;
 }
 
 .drag-area .support {
-    font-size: 12px;
-    color: gray;
-    margin: 10px 0 15px 0;
+  font-size: 12px;
+  color: gray;
+  margin: 10px 0 15px 0;
 }
 
 .drag-area .buttonx {
-    font-size: 17px;
-    font-weight: 500;
-    color: #FF8B4A;
-    cursor: pointer;
+  font-size: 17px;
+  font-weight: 500;
+  color: #ff8b4a;
+  cursor: pointer;
 }
 
 .drag-area.active {
-    border: 2px solid #FF8B4A;
-    margin-bottom: 20px;
+  border: 2px solid #ff8b4a;
+  margin-bottom: 20px;
 }
 
 .drag-area img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    z-index: -1;
-    padding-top: 8px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  z-index: -1;
+  padding-top: 8px;
 }
 
 .image-grid {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
 }
 
 .image-grid img {
-    width: 30%;
-    /* Adjust the width as needed */
-    cursor: pointer;
+  width: 30%;
+  /* Adjust the width as needed */
+  cursor: pointer;
 }
 
-
 /* Additional styles for responsiveness */
 
 @media (max-width: 768px) {
-    .image-grid {
-        flex-direction: column;
-        align-items: center;
-    }
-    .image-grid img {
-        width: 80%;
-        /* Adjust the width for smaller screens */
-        margin-bottom: 10px;
-    }
+  .image-grid {
+    flex-direction: column;
+    align-items: center;
+  }
+  .image-grid img {
+    width: 80%;
+    /* Adjust the width for smaller screens */
+    margin-bottom: 10px;
+  }
 }
 
 .arrow {
-    width: 20px;
-    height: 20px;
-    transform: rotate(90deg);
+  width: 20px;
+  height: 20px;
+  transform: rotate(90deg);
 }
 
 .ar {
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
 }
 
 .easytext {
-    background: linear-gradient(45deg, #FFA07A, #FF6347);
-    -webkit-background-clip: text;
-    color: transparent;
+  background: linear-gradient(45deg, #ffa07a, #ff6347);
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
 .grid-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    max-width: 600px;
-    margin: 0 auto;
-    gap: 10px;
-    /* Adjust the gap as needed */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  max-width: 600px;
+  margin: 0 auto;
+  gap: 10px;
+  /* Adjust the gap as needed */
 }
 
 .grid-item {
-    background: rgba(100, 97, 97, 0.2);
-    backdrop-filter: blur(3.5px);
-    padding: 20px;
-    text-align: center;
-    width: auto;
-    height: max-content;
-    border-radius: 5px;
+  background: rgba(100, 97, 97, 0.2);
+  backdrop-filter: blur(3.5px);
+  padding: 20px;
+  text-align: center;
+  width: auto;
+  height: max-content;
+  border-radius: 5px;
 }
 
 .grid-item:hover {
-    background: linear-gradient(45deg, #FFA07A, #FF6347);
-    color: #fff;
+  background: linear-gradient(45deg, #ffa07a, #ff6347);
+  color: #fff;
 }
 
 .uploadbuttons {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    flex-wrap: nowrap;
-    justify-content: space-around;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  flex-wrap: nowrap;
+  justify-content: space-around;
 }
 
 .uploadbutton {
-    font-family: poppins;
-    font-weight: 400;
-    position: relative;
-    padding: 12px 28px;
-    background: linear-gradient(45deg, #FFA07A, #fa7962);
-    font-size: 17px;
-    font-weight: 500;
-    color: #fff;
-    border: 2px solid transparent;
-    border-radius: 10px;
-    box-shadow: 0 0 0 #fec1958c;
-    transition: all .3s ease-in-out;
-    justify-self: center;
+  font-family: poppins;
+  font-weight: 400;
+  position: relative;
+  padding: 12px 28px;
+  background: linear-gradient(45deg, #ffa07a, #fa7962);
+  font-size: 17px;
+  font-weight: 500;
+  color: #fff;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  box-shadow: 0 0 0 #fec1958c;
+  transition: all 0.3s ease-in-out;
+  justify-self: center;
 }
 
 .star-1 {
-    position: absolute;
-    top: 20%;
-    left: 20%;
-    width: 25px;
-    height: auto;
-    filter: drop-shadow(0 0 0 #fffdef);
-    z-index: -5;
-    transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
+  position: absolute;
+  top: 20%;
+  left: 20%;
+  width: 25px;
+  height: auto;
+  filter: drop-shadow(0 0 0 #fffdef);
+  z-index: -5;
+  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
 }
 
 .star-2 {
-    position: absolute;
-    top: 45%;
-    left: 45%;
-    width: 15px;
-    height: auto;
-    filter: drop-shadow(0 0 0 #fffdef);
-    z-index: -5;
-    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: 15px;
+  height: auto;
+  filter: drop-shadow(0 0 0 #fffdef);
+  z-index: -5;
+  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
 }
 
 .star-3 {
-    position: absolute;
-    top: 40%;
-    left: 40%;
-    width: 5px;
-    height: auto;
-    filter: drop-shadow(0 0 0 #fffdef);
-    z-index: -5;
-    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
+  position: absolute;
+  top: 40%;
+  left: 40%;
+  width: 5px;
+  height: auto;
+  filter: drop-shadow(0 0 0 #fffdef);
+  z-index: -5;
+  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
 }
 
 .star-4 {
-    position: absolute;
-    top: 20%;
-    left: 40%;
-    width: 8px;
-    height: auto;
-    filter: drop-shadow(0 0 0 #fffdef);
-    z-index: -5;
-    transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
+  position: absolute;
+  top: 20%;
+  left: 40%;
+  width: 8px;
+  height: auto;
+  filter: drop-shadow(0 0 0 #fffdef);
+  z-index: -5;
+  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
 }
 
 .star-5 {
-    position: absolute;
-    top: 25%;
-    left: 45%;
-    width: 15px;
-    height: auto;
-    filter: drop-shadow(0 0 0 #fffdef);
-    z-index: -5;
-    transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
+  position: absolute;
+  top: 25%;
+  left: 45%;
+  width: 15px;
+  height: auto;
+  filter: drop-shadow(0 0 0 #fffdef);
+  z-index: -5;
+  transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
 }
 
 .star-6 {
-    position: absolute;
-    top: 5%;
-    left: 50%;
-    width: 5px;
-    height: auto;
-    filter: drop-shadow(0 0 0 #fffdef);
-    z-index: -5;
-    transition: all .8s ease;
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  width: 5px;
+  height: auto;
+  filter: drop-shadow(0 0 0 #fffdef);
+  z-index: -5;
+  transition: all 0.8s ease;
 }
 
 .uploadbutton:hover {
-    border: 2px solid #FF8B4A;
-    background: #f5f5f5;
-    color: #000;
-    transition: all .3s ease-in-out;
+  border: 2px solid #ff8b4a;
+  background: #f5f5f5;
+  color: #000;
+  transition: all 0.3s ease-in-out;
 }
 
 .uploadbutton:hover .star-1 {
-    position: absolute;
-    top: -80%;
-    left: -30%;
-    width: 25px;
-    height: auto;
-    filter: drop-shadow(0 0 10px #fffdef);
-    z-index: 2;
+  position: absolute;
+  top: -80%;
+  left: -30%;
+  width: 25px;
+  height: auto;
+  filter: drop-shadow(0 0 10px #fffdef);
+  z-index: 2;
 }
 
 .uploadbutton:hover .star-2 {
-    position: absolute;
-    top: -25%;
-    left: 10%;
-    width: 15px;
-    height: auto;
-    filter: drop-shadow(0 0 10px #fffdef);
-    z-index: 2;
+  position: absolute;
+  top: -25%;
+  left: 10%;
+  width: 15px;
+  height: auto;
+  filter: drop-shadow(0 0 10px #fffdef);
+  z-index: 2;
 }
 
 .uploadbutton:hover .star-3 {
-    position: absolute;
-    top: 55%;
-    left: 25%;
-    width: 5px;
-    height: auto;
-    filter: drop-shadow(0 0 10px #fffdef);
-    z-index: 2;
+  position: absolute;
+  top: 55%;
+  left: 25%;
+  width: 5px;
+  height: auto;
+  filter: drop-shadow(0 0 10px #fffdef);
+  z-index: 2;
 }
 
 .uploadbutton:hover .star-4 {
-    position: absolute;
-    top: 30%;
-    left: 80%;
-    width: 8px;
-    height: auto;
-    filter: drop-shadow(0 0 10px #fffdef);
-    z-index: 2;
+  position: absolute;
+  top: 30%;
+  left: 80%;
+  width: 8px;
+  height: auto;
+  filter: drop-shadow(0 0 10px #fffdef);
+  z-index: 2;
 }
 
 .uploadbutton:hover .star-5 {
-    position: absolute;
-    top: 25%;
-    left: 115%;
-    width: 15px;
-    height: auto;
-    filter: drop-shadow(0 0 10px #fffdef);
-    z-index: 2;
+  position: absolute;
+  top: 25%;
+  left: 115%;
+  width: 15px;
+  height: auto;
+  filter: drop-shadow(0 0 10px #fffdef);
+  z-index: 2;
 }
 
 .uploadbutton:hover .star-6 {
-    position: absolute;
-    top: 5%;
-    left: 60%;
-    width: 5px;
-    height: auto;
-    filter: drop-shadow(0 0 10px #fffdef);
-    z-index: 2;
+  position: absolute;
+  top: 5%;
+  left: 60%;
+  width: 5px;
+  height: auto;
+  filter: drop-shadow(0 0 10px #fffdef);
+  z-index: 2;
 }
 
 .buttondiv {
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
 }
 
 input #file-input {
-    height: 100%;
+  height: 100%;
 }
 
-
 /* Responsive layout for smaller screens */
 
 @media (max-width: 1024px) {
-    .col-lg-6 {
-        width: 55%;
-    }
-    .col-lg-3 {
-        width: 45%;
-        padding-top: .5em;
-    }
-    #logo img {
-        max-height: 30px;
-        vertical-align: middle;
-        margin-left: 1.5em;
-    }
-    .container {
-        max-width: 90%;
-    }
-    p,
-    input {
-        text-align: center;
-        margin: auto;
-        line-height: normal;
-    }
-    input,
-    textarea {
-        width: 100%;
-        box-sizing: border-box;
-        margin: 0px 0 10px 0;
-    }
+  .col-lg-6 {
+    width: 55%;
+  }
+  .col-lg-3 {
+    width: 45%;
+    padding-top: 0.5em;
+  }
+  #logo img {
+    max-height: 30px;
+    vertical-align: middle;
+    margin-left: 1.5em;
+  }
+  .container {
+    max-width: 90%;
+  }
+  p,
+  input {
+    text-align: center;
+    margin: auto;
+    line-height: normal;
+  }
+  input,
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0px 0 10px 0;
+  }
 }
 
 @media (max-width: 768px) {
-    .col-lg-6,
-    .col-lg-3 {
-        width: 100%;
-        float: none;
-        /* Remove float for full-width layout */
-    }
-    .container {
-        max-width: 100%;
-    }
+  .col-lg-6,
+  .col-lg-3 {
+    width: 100%;
+    float: none;
+    /* Remove float for full-width layout */
+  }
+  .container {
+    max-width: 100%;
+  }
 }
 
 @media (max-width: 576px) {
-    .drag-area {
-        padding: 0px 20px;
-    }
-    .image-grid img {
-        width: 100%;
-    }
-    .container {
-        width: 90%;
-        max-width: 100%;
-        padding: 1em;
-        margin: 0 auto;
-    }
-    .drag-area {
-        padding: 0px 20px;
-        /* Adjust padding for smaller screens */
-    }
-    .image-grid img {
-        width: 100%;
-        /* Adjust image width for smaller screens */
-    }
-    p,
-    input {
-        text-align: center;
-        margin: auto;
-        line-height: normal;
-    }
-    input,
-    textarea {
-        width: 100%;
-        box-sizing: border-box;
-        margin: 0px 0 10px 0;
-        display: block;
-    }
-    .drag-area img {
-        width: 90%;
-        height: 90%;
-        object-fit: contain;
-        z-index: -1;
-        padding-top: 8px;
-    }
-    .wall {
-        position: absolute;
-        width: 100vw;
-        height: 100vh;
-        background-color: #fff;
-    }
+  .drag-area {
+    padding: 0px 20px;
+  }
+  .image-grid img {
+    width: 100%;
+  }
+  .container {
+    width: 90%;
+    max-width: 100%;
+    padding: 1em;
+    margin: 0 auto;
+  }
+  .drag-area {
+    padding: 0px 20px;
+    /* Adjust padding for smaller screens */
+  }
+  .image-grid img {
+    width: 100%;
+    /* Adjust image width for smaller screens */
+  }
+  p,
+  input {
+    text-align: center;
+    margin: auto;
+    line-height: normal;
+  }
+  input,
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0px 0 10px 0;
+    display: block;
+  }
+  .drag-area img {
+    width: 90%;
+    height: 90%;
+    object-fit: contain;
+    z-index: -1;
+    padding-top: 8px;
+  }
+  .wall {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+  }
 }
 
 #error-message {
-    color: #ff0000;
-    font-size: 14px;
-    margin-top: 8px;
-}
+  color: #ff0000;
+  font-size: 14px;
+  margin-top: 8px;
+}

static/js/site.js

@@ -1,160 +1,80 @@
-$(document).ready(function() {
-    /* Video Lightbox */
-    if (!!$.prototype.simpleLightboxVideo) {
-        $('.video').simpleLightboxVideo();
+$(document).ready(function () {
+  /* Video Lightbox */
+  if (!!$.prototype.simpleLightboxVideo) {
+    $(".video").simpleLightboxVideo();
+  }
+
+  /*ScrollUp*/
+  if (!!$.prototype.scrollUp) {
+    $.scrollUp();
+  }
+
+  /*Responsive Navigation*/
+  $("#nav-mobile").html($("#nav-main").html());
+  $("#nav-trigger span").on("click", function () {
+    if ($("nav#nav-mobile ul").hasClass("expanded")) {
+      $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
+      $(this).removeClass("open");
+    } else {
+      $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
+      $(this).addClass("open");
     }
+  });
 
-    /*ScrollUp*/
-    if (!!$.prototype.scrollUp) {
-        $.scrollUp();
+  $("#nav-mobile").html($("#nav-main").html());
+  $("#nav-mobile ul a").on("click", function () {
+    if ($("nav#nav-mobile ul").hasClass("expanded")) {
+      $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
+      $("#nav-trigger span").removeClass("open");
     }
-
-    /*Responsive Navigation*/
-    $("#nav-mobile").html($("#nav-main").html());
-    $("#nav-trigger span").on("click", function() {
-        if ($("nav#nav-mobile ul").hasClass("expanded")) {
-            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
-            $(this).removeClass("open");
-        } else {
-            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
-            $(this).addClass("open");
-        }
-    });
-
-    $("#nav-mobile").html($("#nav-main").html());
-    $("#nav-mobile ul a").on("click", function() {
-        if ($("nav#nav-mobile ul").hasClass("expanded")) {
-            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
-            $("#nav-trigger span").removeClass("open");
-        }
-    });
-
-    /* Sticky Navigation */
-    if (!!$.prototype.stickyNavbar) {
-        $('#header').stickyNavbar();
+  });
+
+  /* Sticky Navigation */
+  if (!!$.prototype.stickyNavbar) {
+    $("#header").stickyNavbar();
+  }
+
+  $("#content").waypoint(function (direction) {
+    if (direction === "down") {
+      $("#header").addClass("nav-solid fadeInDown");
+    } else {
+      $("#header").removeClass("nav-solid fadeInDown");
     }
-
-    $('#content').waypoint(function(direction) {
-        if (direction === 'down') {
-            $('#header').addClass('nav-solid fadeInDown');
-        } else {
-            $('#header').removeClass('nav-solid fadeInDown');
-        }
-    });
-
+  });
 });
 
-
 /* Preloader and animations */
-$(window).load(function() { // makes sure the whole site is loaded
-    $('#status').fadeOut(); // will first fade out the loading animation
-    $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
-    $('body').delay(450).css({ 'overflow-y': 'visible' });
-
-    /* WOW Elements */
-    if (typeof WOW == 'function') {
-        new WOW().init();
-    }
-
-    /* Parallax Effects */
-    if (!!$.prototype.enllax) {
-        $(window).enllax();
-    }
-
+$(window).load(function () {
+  // makes sure the whole site is loaded
+  $("#status").fadeOut(); // will first fade out the loading animation
+  $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
+  $("body").delay(450).css({ "overflow-y": "visible" });
+
+  /* WOW Elements */
+  if (typeof WOW == "function") {
+    new WOW().init();
+  }
+
+  /* Parallax Effects */
+  if (!!$.prototype.enllax) {
+    $(window).enllax();
+  }
 });
-document.addEventListener('DOMContentLoaded', function() {
-    var canvasContainer = document.getElementById('canvas-container');
-    var canvas = new fabric.Canvas('c3', { width: canvasContainer.offsetWidth, height: canvasContainer.offsetHeight });
-
-    var image = document.getElementById('my-image');
-    var originalScale;
-
-    function resizeCanvas() {
-        canvas.setWidth(canvasContainer.offsetWidth);
-        canvas.setHeight(canvasContainer.offsetHeight);
-
-        if (canvas.item(0)) {
-            var fabricImg = canvas.item(0);
-            var scaleX = canvas.width / fabricImg.width;
-            var scaleY = canvas.height / fabricImg.height;
-            var minScale = Math.min(scaleX, scaleY);
-
-            originalScale = minScale;
-
-            fabricImg.set({
-                left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
-                top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
-                scaleX: minScale,
-                scaleY: minScale
-            });
-
-            canvas.renderAll();
-        }
-    }
-
-    fabric.Image.fromURL(image.src, function(fabricImg) {
-        var scaleX = canvas.width / fabricImg.width;
-        var scaleY = canvas.height / fabricImg.height;
-        var minScale = Math.min(scaleX, scaleY);
-
-        originalScale = minScale;
-
-        fabricImg.set({
-            left: canvas.width / 2 - (fabricImg.width * minScale) / 2,
-            top: canvas.height / 2 - (fabricImg.height * minScale) / 2,
-            scaleX: minScale,
-            scaleY: minScale
-        });
-
-        canvas.add(fabricImg);
+document.addEventListener("DOMContentLoaded", function () {
+  const imageContainers = document.querySelectorAll(".image-container");
+
+  imageContainers.forEach(function (container) {
+    container.addEventListener("click", function () {
+      const imageUrl = this.querySelector("img").src;
+      const zoomedImageContainer = document.createElement("div");
+      zoomedImageContainer.className = "zoomed-image-container";
+      zoomedImageContainer.innerHTML =
+        '<img src="' + imageUrl + '" alt="Zoomed Image" />';
+      document.body.appendChild(zoomedImageContainer);
+
+      zoomedImageContainer.addEventListener("click", function () {
+        this.remove();
+      });
     });
-
-    window.addEventListener('resize', function() {
-        resizeCanvas();
-    });
-
-    canvas.on('mouse:down', function(options) {
-        if (options.target) {
-            options.target.set({
-                opacity: 0.5,
-                borderColor: 'red',
-                cornerColor: 'green',
-                cornerSize: 6,
-                transparentCorners: false
-            });
-            canvas.renderAll();
-        }
-    });
-
-    canvas.on('mouse:up', function(options) {
-        if (options.target) {
-            options.target.set({
-                opacity: 1,
-                borderColor: null,
-                cornerColor: null
-            });
-            canvas.renderAll();
-        }
-    });
-
-    document.getElementById('reset-button').addEventListener('click', function() {
-        if (canvas.item(0)) {
-            canvas.item(0).set({
-                scaleX: originalScale,
-                scaleY: originalScale
-            });
-            canvas.renderAll();
-        }
-    });
-
-    canvas.on('object:moving', function(options) {
-        // Handle object moving (dragging)
-    });
-
-    canvas.on('object:scaling', function(options) {
-        // Handle object scaling
-    });
-
-    // Initial canvas resize
-    resizeCanvas();
-});
+  });
+});

static/js/slideshow.js

@@ -0,0 +1,64 @@
+// Function to load images from a folder
+function loadImagesFromFolder(folder) {
+    return new Promise((resolve, reject) => {
+        fetch(folder)
+            .then(response => response.text())
+            .then(text => {
+                const parser = new DOMParser();
+                const htmlDoc = parser.parseFromString(text, 'text/html');
+                const images = Array.from(htmlDoc.querySelectorAll('a'))
+                    .filter(a => /\.(jpe?g|png|gif)$/i.test(a.href))
+                    .map(a => a.href);
+                resolve(images);
+            })
+            .catch(error => {
+                reject(error);
+            });
+    });
+}
+
+// Function to display slideshow
+function displaySlideshow(images) {
+    const canvas = document.getElementById('c3');
+    const ctx = canvas.getContext('2d');
+    const img = document.getElementById('my-image');
+
+    let currentIndex = 0;
+
+    // Function to draw current image on canvas
+    function drawImageOnCanvas(index) {
+        img.src = images[index];
+        img.onload = () => {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+        };
+    }
+
+    // Initial drawing
+    drawImageOnCanvas(currentIndex);
+
+    // Switch to the next image in the array
+    function nextImage() {
+        currentIndex = (currentIndex + 1) % images.length;
+        drawImageOnCanvas(currentIndex);
+    }
+
+    // Start slideshow
+    const slideshowInterval = setInterval(nextImage, 2000); // Change interval as needed
+
+    // Stop slideshow after all images have been shown
+    setTimeout(() => {
+        clearInterval(slideshowInterval);
+    }, images.length * 2000); // Adjust duration based on image count
+}
+
+// Usage
+const folderPath = 'temp/uploads';
+loadImagesFromFolder(folderPath)
+    .then(images => {
+        displaySlideshow(images);
+    })
+    .catch(error => {
+        console.error('Error loading images:', error);
+    });

templates/extractor.html

@@ -42,12 +42,51 @@
             flex: 2;
             background-color: #ddd;
             padding: 20px;
-            overflow-y: hidden;
             max-height: 100vh;
             width: 100%;
+            max-width: 100%;
             box-shadow: inset 0 15px 30px rgba(0, 0, 0, 0.1);
+            overflow-y: auto;
         }
-        
+        #canvas-container {
+            display: flex;
+            flex-wrap: wrap; /* Wrap items to next line when they exceed the container width */
+            justify-content: center; /* Center items horizontally */
+            gap: 10px; /* Add some space between images */
+            max-width: 100%; /* Ensure images don't exceed the container width */
+            margin-top: 70px;
+        }
+    
+        .image-container {
+            width: 200px; /* Set your desired width */
+            height: 300px; /* Set your desired height */
+            background-color: white; /* White background */
+            padding: 30px 30px 40px 30px; /* Add padding */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border-radius:10px;
+        }
+        .image-container:hover{
+            transition: all 0.3s;
+            transform: translateY(1.5px);
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
+        }
+        .image-container img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s;
+        }
+        p.images-name {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            font-size: 10px;
+            margin: 5px 0 0 0 ;
+            text-align: center;
+            padding: 0;
+        }
+    
         .right-column {
             flex: 2;
             background-color: #ffffff;
@@ -103,7 +142,6 @@
         
         #canvas-container {
             position: relative;
-            overflow: hidden;
             width: 100%;
             height: 100%;
         }
@@ -164,9 +202,6 @@
         
         .receipt {
             margin: 20px 20px;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            font: 14px;
         }
         
         .receipt1 {
@@ -178,21 +213,6 @@
             border-radius: 10px;
         }
         
-        .filenm {
-            padding: 1em 1.8em;
-            box-sizing: border-box;
-            border-radius: 10px;
-            display: flex;
-            transition: 0.2s background;
-            align-items: center;
-            gap: 0.6em;
-            background: rgba(255, 255, 255, 0.6);
-            backdrop-filter: blur(10px);
-            margin-right: 10px;
-            font-size: 14px;
-            font-weight: 300;
-        }
-        
         .receipt h1 {
             text-align: center;
         }
@@ -206,7 +226,9 @@
             border-collapse: collapse;
             margin-bottom: 20px;
         }
-        
+        .receipt table {
+            border-radius: 10px;
+        }
         .receipt table th,
         .receipt table td {
             border: 1px solid #ccc;
@@ -216,11 +238,19 @@
         .receipt table th {
             background-color: #f0f0f0;
             text-align: left;
+            font-size:16px;
+            font-weight:500;
+            text-align:center;
         }
         
-        .receipt tfoot td {
-            text-align: right;
-            font-weight: bold;
+        .receipt table td {
+            text-align:center;
+            font-size: 14px;
+            max-width: 150px; /* Set the maximum width */
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 0 20px ;
         }
         
         #dataTable {
@@ -306,7 +336,9 @@
             border-radius: 10px;
             z-index: -1;
         }
-        
+        .details{
+
+        }
         .exportbutton {
             margin-right: 17px;
             box-sizing: border-box;
@@ -541,6 +573,85 @@
             width: 40%;
             height: 40%;
         }
+        .red-border {
+            border: 2px solid red;
+        }
+        
+        .green-border {
+            border: 2px solid green;
+        }
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        .image-container:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .tooltiptext {
+            font-size: 12px;
+            visibility: hidden;
+            width: 160px;
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            border-radius: 8px;
+            padding: 5px;
+            position: absolute;
+            z-index: 99;
+            bottom: 105%;
+            left: 50%;
+            margin-left: -80px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        
+        .tooltiptext::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #333 transparent transparent transparent;
+        }
+        .zoomed-image-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 50%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 999;
+        }
+    
+        .zoomed-image-container img {
+            max-width: 90%;
+            max-height: 90%;
+            object-fit: contain;
+        }
+        @media (max-width: 576px) {
+            .zoomed-image-container {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 45%;
+                background-color: rgba(0, 0, 0, 0.8);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 999;
+            }
+        }
+        /* Optional: If you want to hide the scrollbar in Firefox */
+        scrollbar-width: none;
     </style>
     <script src="https://cdn.lordicon.com/lordicon.js"></script>
 </head>
@@ -550,35 +661,25 @@
         <!-- Flash message will be displayed here -->
     </div>
     <div class="containerz">
-
         <div class="left-column">
             <button class="backbutton" id="submitButton" onclick="window.location.href='{{ url_for('index') }}'">
                 <i class="fa-solid fa-arrow-left"></i>
                 <span>Back</span>
-              </button>
-            <div id="filenm">
-                <div style="display: flex; align-items: center; position: absolute; top: 0px; right: 0;">
-                    <span class="filenm">
-                            <lord-icon
-                        src="https://cdn.lordicon.com/xpgofwru.json"
-                        trigger="in"
-                        delay ="500"
-                        state="hover-file-2"
-                        colors="primary:#ff8b4a"
-                        style="width:20px;height:20px">
-                    </lord-icon>
-                    {{ old_name }}</span>
-                    </button>
-                </div>
-            </div>
-
-
+            </button>
             <div id="canvas-container">
-                <canvas id="c3"></canvas> {% if uploaded_file %}
-                <img src="{{ url_for('static', filename='uploads/' + uploaded_file) }}" id="my-image" hidden> {% else %}
-                <p>No file uploaded.</p>
+                {% if image_paths %}
+                    {% for image_path, prediction_results_copy in predictions.items() %}
+                        <div class="image-container {% if prediction_results_copy == 'non-receipt' %}red-border{% elif prediction_results_copy == 'receipt' %}green-border{% endif %}">
+                            <div class="tooltiptext">Click to view fullscreen</div>
+                            <img src="{{ url_for('static', filename='temp/img_display/' + image_path) }}" id="my-image" alt="uploads" />
+                            <div class="image-name">
+                                <p class="images-name">{{image_path}}</p>
+                            </div>
+                        </div>
+                    {% endfor %}
+                {% else %}
+                    <p>No files uploaded.</p>
                 {% endif %}
-
             </div>
         </div>
         <div class="right-column">
@@ -594,19 +695,36 @@
                 <p class="desc">Verify receipt details attentively, acknowledging occasional misclassification, which may arise from variations in image quality or format.</p>
             </div>
             <div class="receipt">
-                <div class="details">
-                    <div style="display: flex; align-items: center;">
-                        {% if prediction_result.lower() == 'receipt' %}
-                        <lord-icon src="https://cdn.lordicon.com/lomfljuq.json" trigger="in" delay="1500" colors="primary:#16c72e" state="morph-check-in-1" style="width:25px;height:25px">
-                        </lord-icon>
-                        <p class="valid">The image uploaded is a Valid Receipt.</p>
-                        {% else %}
-                        <lord-icon src="https://cdn.lordicon.com/zxvuvcnc.json" trigger="in" delay="1500" state="morph-cross-in" colors="primary:#e83a30" style="width:25px;height:25px">
-                        </lord-icon>
-                        <p class="valid">The image uploaded is NOT a Receipt Please return and upload again.</p>
-                        {% endif %}
-                    </div>
-                </div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>File Name</th>
+                        <th>Prediction Result</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for image_path, prediction_results_copy in predictions.items() %}
+                    <tr>
+                        <td>{{ image_path }}</td>
+                        <td>
+                            <div class="details">
+                                <div style="display: flex; align-items: center; justify-content: center;">
+                                    {% if prediction_results_copy.lower() == 'receipt' %}
+                                    <lord-icon src="https://cdn.lordicon.com/lomfljuq.json" trigger="in" delay="1500" colors="primary:#16c72e" state="morph-check-in-1" style="width:25px;height:25px">
+                                    </lord-icon>
+                                    <p class="valid">Valid Receipt</p>
+                                    {% else %}
+                                    <lord-icon src="https://cdn.lordicon.com/zxvuvcnc.json" trigger="in" delay="1500" state="morph-cross-in" colors="primary:#e83a30" style="width:25px;height:25px">
+                                    </lord-icon>
+                                    <p class="valid">Not a Receipt</p>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
             </div>
             <hr style="color: #ccc; width:95%; opacity:0.35;">
             <div class="labels" style="margin: 0 0 0 20px;">

templates/index.html

@@ -120,13 +120,13 @@
                         <form action="/upload" method="POST" enctype="multipart/form-data">
                             <div class="container">
                                 <div class="drag-area" id="container">
-                                    <div class="icon">
-                                        <img src="/static/images/uplogo.gif">
-                                    </div>
-                                    <p>Upload files here or click to upload</p>
-                                    <input type="file" name="file" id="file-input">
-                                    <p id="uploaded-file-name">{% if uploaded_file %}Uploaded File: {{ uploaded_file }}{% endif %}</p>
-                                </div>
+                                  <div class="icon">
+                                      <img src="/static/images/uplogo.gif">
+                                  </div>
+                                  <p>Upload files here or click to upload</p>
+                                  <input type="file" name="files[]" id="file-input" multiple>
+                                  <p id="uploaded-file-name">{% if uploaded_file %}Uploaded File: {{ uploaded_file }}{% endif %}</p>
+                              </div>
                             </div>
                             <div class="buttondiv">
                               <button class="uploadbutton wow bounceInUp" data-wow-offset="3" data-wow-duration="1.5s" data-wow-delay="0.5s" type="submit" onclick="uploadClicked()">