Merge branch 'ER_Similarity' into 'IT20139544'

Comparison of Visual and Quantitative Similarity

See merge request !11

data/attributes.json

+{"Event": ["e_id", "e_title", "e_date", "e_venue"], "Customer": ["c_id", "c_name", "c_contact_info", "c_ticket_history"], "Attendee": ["a_id", "a_event_id", "a_customer_id"], "Ticket": ["t_id", "t_price", "t_event_id", "t_capacity", "t_scanning"]}
\ No newline at end of file

data/entity_list.json

+["Event", "Customer", "Attendee", "Ticket"]
\ No newline at end of file

data/relations.json

+{"has": {"left": ["Event", "M"], "right": ["Attendee", "M"]}, "purchases": {"left": ["Customer", "M"], "right": ["Ticket", "M"]}, "attends": {"left": ["Attendee", "M"], "right": ["Event", "M"]}}
\ No newline at end of file

data/sql_queries.json

+"CREATE TABLE Event (e_id VARCHAR(255), e_title VARCHAR(255), e_date VARCHAR(255), e_venue VARCHAR(255));\nCREATE TABLE Customer (c_id VARCHAR(255), c_name VARCHAR(255), c_contact_info VARCHAR(255), c_ticket_history VARCHAR(255));\nCREATE TABLE Attendee (a_id VARCHAR(255), a_event_id VARCHAR(255), a_customer_id VARCHAR(255));\nCREATE TABLE Ticket (t_id VARCHAR(255), t_price VARCHAR(255), t_event_id VARCHAR(255), t_capacity VARCHAR(255), t_scanning VARCHAR(255));\nALTER TABLE Event ADD CONSTRAINT FK_Event_Attendee FOREIGN KEY (event_id) REFERENCES Attendee(attendee_id);\nALTER TABLE Customer ADD CONSTRAINT FK_Customer_Ticket FOREIGN KEY (customer_id) REFERENCES Ticket(ticket_id);\nALTER TABLE Attendee ADD CONSTRAINT FK_Attendee_Event FOREIGN KEY (attendee_id) REFERENCES Event(event_id);"
\ No newline at end of file

lib.py

+import nltk
+nltk.download('wordnet')

requirements.txt

+matplotlib==3.7.1
+nltk==3.8.1
+numpy==1.23.5
+pandas==2.0.2
+scikit-learn==1.2.2
+seaborn==0.12.2
+joblib==1.2.0
+imutils==0.5.4
+Flask==2.3.2
+keras-ocr==0.8.9
+openai==0.27.8
+tensorflow==2.12.0
+seaborn==0.12.2
+wheel==0.40.0
+spellchecker==0.4
+yarl==1.9.2
\ No newline at end of file

similarity.py

+import tensorflow as tf
+from tensorflow.keras.applications import VGG16
+from tensorflow.keras.preprocessing import image
+from tensorflow.keras.applications.vgg16 import preprocess_input
+from sklearn.metrics.pairwise import cosine_similarity
+import os
+import matplotlib.pyplot as plt
+import cv2
+from matplotlib import pyplot as plt
+import keras_ocr
+import numpy as np
+from spellchecker import SpellChecker
+
+def perform_ocr_and_similarity(image_path1, image_path2):
+    # Read images from the input paths
+    img = cv2.imread(image_path1, cv2.IMREAD_GRAYSCALE)
+    img2 = cv2.imread(image_path2, cv2.IMREAD_GRAYSCALE)
+
+    # Invert the first uploaded image
+    inverted_image = cv2.bitwise_not(img)
+
+    # Save the inverted image to a temporary folder
+    temp_folder = "temp"
+    os.makedirs(temp_folder, exist_ok=True)
+    cv2.imwrite(os.path.join(temp_folder, "inverted_image1.jpg"), inverted_image)
+
+    # Invert the second uploaded image
+    inverted_image2 = cv2.bitwise_not(img2)
+
+    # Save the second inverted image to the temporary folder
+    cv2.imwrite(os.path.join(temp_folder, "inverted_image2.jpg"), inverted_image2)
+
+    # Perform OCR on the inverted images
+    pipeline = keras_ocr.pipeline.Pipeline()
+
+    image_path_inverted1 = os.path.join(temp_folder, "inverted_image1.jpg")
+    image_path_inverted2 = os.path.join(temp_folder, "inverted_image2.jpg")
+
+    results1 = pipeline.recognize([image_path_inverted1])
+    word_list1 = [word[0] for word in results1[0]]
+
+    results2 = pipeline.recognize([image_path_inverted2])
+    word_list2 = [word[0] for word in results2[0]]
+
+    # Correct the recognized words
+    spell = SpellChecker()
+    corrected_word_list1 = [spell.correction(word) for word in word_list1]
+    corrected_word_list2 = [spell.correction(word) for word in word_list2]
+
+    # Calculate Jaccard similarity for predicted and corrected words
+    def jaccard_similarity(set1, set2):
+        intersection = len(set1.intersection(set2))
+        union = len(set1.union(set2))
+        return intersection / union if union != 0 else 0  # Avoid division by zero
+
+    similarity_predicted_word = jaccard_similarity(set(word_list1), set(word_list2))
+    similarity_corrected_word = jaccard_similarity(set(corrected_word_list1), set(corrected_word_list2))
+
+    # Calculate image similarity
+    def calculate_image_similarity(image_path1, image_path2):
+        vgg_model = VGG16(weights='imagenet', include_top=False)
+
+        def preprocess_image(image_path):
+            img = image.load_img(image_path, target_size=(224, 224))
+            img = image.img_to_array(img)
+            img = preprocess_input(img)
+            img = tf.expand_dims(img, axis=0)
+            return img
+
+        img1 = preprocess_image(image_path1)
+        img2 = preprocess_image(image_path2)
+
+        features1 = vgg_model.predict(img1)
+        features2 = vgg_model.predict(img2)
+
+        # Reshape the features to 1D arrays
+        features1 = features1.flatten()
+        features2 = features2.flatten()
+
+        # Calculate cosine similarity between the feature vectors
+        similarity_score = cosine_similarity([features1], [features2])[0][0]
+        return similarity_score
+
+    # Calculate final similarity scores
+    image_score = calculate_image_similarity(image_path_inverted1, image_path_inverted2)
+    final_score_predicted = (similarity_predicted_word + image_score) / 2
+    final_score_corrected = (similarity_corrected_word + image_score) / 2
+
+    return word_list1, corrected_word_list1, word_list2, corrected_word_list2, final_score_predicted, final_score_corrected
+
+    
+
+

templates/dashboard.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <!-- Add Font Awesome CSS link here -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <style>
+        /* Additional CSS styles */
+        .navbar {
+            background-color: #333;
+        }
+        .navbar-nav .nav-link {
+            color: white;
+        }
+        .navbar-nav .nav-link:hover {
+            color: yellow;
+        }
+        .carousel-container {
+            background-color: #000; /* Set your desired background color */
+            overflow: hidden;
+        }
+        .carousel-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover; /* Ensure the image covers the entire slide */
+        }
+        .carousel {
+            width: 100%; /* Set carousel width to 100% */
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <a class="navbar-brand" href="#">ER DIAGRAM TOOL</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav mr-auto">
+                {% if user_role == 'student' %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('generate_er_diagram') }}"><i class="fas fa-database"></i> ER Diagram Generator</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('quiz') }}"><i class="fas fa-question-circle"></i> AI Based Quiz</a>
+                </li>
+                {% elif user_role == 'teacher' %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('generate_er_diagram') }}"><i class="fas fa-database"></i> ER Diagram Generator</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('extract') }}"><i class="fas fa-project-diagram"></i> ER Diagram Extractor</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('similarity') }}"><i class="fas fa-search"></i> Similarity Checker</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('quiz_count') }}"><i class="fas fa-search"></i> Quiz count</a>
+                </li>                
+                {% endif %}
+            </ul>
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout {{user_role}}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('home') }}"><i class="fas fa-home"></i> Home</a>
+                </li>
+                
+            </ul>
+        </div>
+    </nav>
+    
+
+    <!-- Content Area -->
+    <!--<div class="container">-->
+        <div id="carouselExample" class="carousel slide" data-ride="carousel">
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src="/static/diagram.webp" class="d-block w-100" alt="Slide 1">
+                </div>
+                <div class="carousel-item">
+                    <img src="/static/diagram2.webp" class="d-block w-100" alt="Slide 2">
+                </div>
+                <div class="carousel-item">
+                    <img src="/static/diagram3.webp" class="d-block w-100" alt="Slide 3">
+                </div>
+                <div class="carousel-item">
+                    <img src="/static/diagram4.webp" class="d-block w-100" alt="Slide 4">
+                </div>
+            </div>
+            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
+    <!--</div>-->
+
+    <!-- Bootstrap JS, Popper.js, and jQuery scripts -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@2.9.1/dist/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</body>
+
+</html>

templates/home.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ER Diagram Tool</title>
+    <style>
+        /* Additional CSS styles */
+        body, html {
+            height: 100%;
+            background: url('/static/back.png') no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+        }
+        .container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+        .card {
+            width: fit-content;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="card-body text-center">
+                <h1 class="card-title">WELCOME TO THE ER DIAGRAM TOOL</h1>
+                <p class="card-text">Please register or log in to use this tool.</p>
+                <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg btn-block">Login</a>
+                <a href="{{ url_for('register') }}" class="btn btn-success btn-lg btn-block mt-3">Register</a>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

templates/login.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: url('/static/cover.png') no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .card {
+            max-width: 400px;
+            width: 100%;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+        input[type="text"], input[type="password"] {
+            font-size: 16px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <div class="card-body text-center">
+            <h1 class="card-title">LOGIN PAGE</h1>
+
+            <form method="POST" action="">
+                {{ form.hidden_tag() }}
+                <div class="form-group">
+                    {{ form.username(class="form-control", placeholder="Username") }}
+                </div>
+                <div class="form-group">
+                    {{ form.password(class="form-control", placeholder="Password") }}
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">Login</button>
+            </form>
+
+            <a href="{{ url_for('register') }}" class="mt-3">Don't have an account? Sign Up</a>
+            <div>
+                <a href="{{ url_for('home') }}">Back to Home</a>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

templates/register.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Add the Bootstrap CSS link here -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: url('/static/cover.png') no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .card {
+            max-width: 400px;
+            width: 100%;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+        input[type="text"], input[type="password"] {
+            font-size: 16px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <div class="card-body text-center">
+            <h1 class="card-title">REGISTER PAGE</h1>
+
+            <form method="POST" action="">
+                {{ form.hidden_tag() }}
+                <div class="form-group">
+                    {{ form.username(class="form-control", placeholder="Username") }}
+                </div>
+                <div class="form-group">
+                    {{ form.password(class="form-control", placeholder="Password") }}
+                </div>
+                <button type="submit" class="btn btn-success btn-block">Register</button>
+            </form>
+
+            <a href="{{ url_for('login') }}" class="mt-3">Already have an account? Log In</a>
+            <div>
+                <a href="{{ url_for('home') }}">Back to Home</a>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

templates/similarity.html

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Image Similarity Checker</title>
+
+    <!-- Bootstrap CSS Link -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f8f9fa;
+        }
+
+        .container {
+            margin-top: 50px;
+        }
+
+        .result-box {
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+            margin-top: 30px;
+        }
+    </style>
+
+</head>
+<body>
+    <div class="container">
+        <h1 class="mb-4">Image Similarity Checker</h1>
+        <form action="/similarity" method="post" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="image1">Image 1:</label>
+                <input type="file" class="form-control" name="image1" accept="image/*" required>
+            </div>
+            <div class="form-group mb-3">
+                <label for="image2">Image 2:</label>
+                <input type="file" class="form-control" name="image2" accept="image/*" required>
+            </div>
+            <div class="row">
+                <div class="col-md-1">
+                    <button type="submit" class="btn btn-primary">Check</button>
+                </div>
+                <div class="col-md-1">
+                    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back</a>
+                </div>
+            </div>
+        </form>
+
+        <!-- Display the similarity result here -->
+        <div class="result-box mt-5">
+            <h2>Similarity Result</h2>
+            <p>{{ similarity_result }}</p>
+
+            <!-- Display detailed results -->
+            {% if detailed_results %}
+                <h2>Detailed Results</h2>
+                <p><strong>Predicted Word List 1:</strong> {{ detailed_results.word_list1 }}</p>
+                <p><strong>Corrected Word List 1:</strong> {{ detailed_results.corrected_word_list1 }}</p>
+                <p><strong>Predicted Word List 2:</strong> {{ detailed_results.word_list2 }}</p>
+                <p><strong>Corrected Word List 2:</strong> {{ detailed_results.corrected_word_list2 }}</p>
+                <p><strong>Final Predicted Similarity Score (predicted words):</strong> {{ detailed_results.pred }}</p>
+                <p><strong>Final Predicted Similarity Score (corrected words):</strong> {{ detailed_results.corr }}</p>
+            {% endif %}
+        </div>
+        <!-- Display preview images -->
+        {% if similarity_result %}
+        <div class="row mt-5">
+            <div class="col-md-6">
+                <h2>Image 1 Preview</h2>
+                <img src="/images/inverted_image1.jpg" class="img-fluid" alt="Image 1">
+            </div>
+            <div class="col-md-6">
+                <h2>Image 2 Preview</h2>
+                <img src="/images/inverted_image2.jpg" class="img-fluid" alt="Image 2">
+            </div>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Bootstrap JS and Popper.js Scripts (placed at the end of the document for faster loading) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

users.csv

+id,username,password,role
+1,student,student,student
+2,teacher,teacher,teacher