updated the system

app.py

@@ -1,25 +1,18 @@
-import os
-from flask import Flask, render_template, jsonify, request, redirect, url_for
+from flask import Flask, render_template, request, jsonify
 from tensorflow.keras.models import load_model
-import numpy as np
 from numpy.random import randn
-from matplotlib import pyplot
+import matplotlib.pyplot as plt
+import numpy as np
 import base64
 from io import BytesIO
 
 app = Flask(__name__)
 
-GENERATED_FOLDER = 'static/generated'
-
-app.config['GENERATED_FOLDER'] = GENERATED_FOLDER
-
 # Load your GAN model from the H5 file
 model = load_model('gan.h5')
 
 def generate_latent_points(latent_dim, n_samples):
-    # generate points in the latent space
     x_input = randn(latent_dim * n_samples)
-    # reshape into a batch of inputs for the network
     z_input = x_input.reshape(n_samples, latent_dim)
     return z_input
 
@@ -27,38 +20,49 @@ def generate_images(model, latent_points):
     generated_images = model.predict(latent_points)
     return generated_images
 
-# create a plot of generated images
-def plot_generated(examples, n, image_size=(80, 80)): 
-    # plot images
-    fig, axes = pyplot.subplots(n, n, figsize=(8, 8))
-    for i in range(n * n):
-        # turn off axis
-        axes.flatten()[i].axis('off')
-        # plot raw pixel data
-        axes.flatten()[i].imshow(examples[i, :, :])
-    
-    # Save the plot to BytesIO
+def plot_generated(examples, n_rows, n_cols, image_size=(80, 80)):
+    fig, axes = plt.subplots(n_rows, n_cols, figsize=(15, 10))
+
+    for i in range(n_rows):
+        for j in range(n_cols):
+            index = i * n_cols + j
+            if index < len(examples):
+                axes[i, j].axis('off')
+                axes[i, j].imshow(examples[index, :, :])
+            else:
+                axes[i, j].axis('off')
+
     buf = BytesIO()
     fig.savefig(buf, format='png')
     buf.seek(0)
-    pyplot.close(fig)
-    
+    plt.close(fig)
+
     return base64.b64encode(buf.read()).decode('utf-8')
 
 @app.route('/')
 def index():
-    return render_template('index.html') 
+    return render_template('index.html')
+
+import math
 
 @app.route('/generate', methods=['POST'])
 def generate():
     latent_dim = 100
-    n_samples = 4
+    n_samples = max(int(request.form.get('n_samples', 4)), 1)
+
+    # Calculate the number of rows dynamically based on the square root of n_samples
+    n_rows = max(int(math.sqrt(n_samples)), 1)
+    
+    # Calculate the number of columns based on the number of rows
+    n_cols = (n_samples + n_rows - 1) // n_rows
+    
     latent_points = generate_latent_points(latent_dim, n_samples)
     generated_images = generate_images(model, latent_points)
     generated_images = (generated_images + 1) / 2.0
-    img_data = plot_generated(generated_images, int(np.sqrt(n_samples)))
+    img_data = plot_generated(generated_images, n_rows, n_cols)
 
     return jsonify({'success': True, 'generated_image': img_data})
 
+
 if __name__ == '__main__':
     app.run(debug=True)

static/css/style.css

@@ -183,10 +183,13 @@ textarea {
 
 input {
     height: 40px;
-    margin: 3px 0;
+    text-align: center;
+    width: 70px;
+    margin: 10px 0 10px 0;
     outline: none;
     line-height: normal;
     font-size: 14px;
+    border-radius: 8px;
 }
 
 input[type="submit"] {
@@ -2735,7 +2738,7 @@ blockquote {
     max-height: 400px;
     width: 100%;
     padding: 25px;
-    background: rgb(255 255 255 / 0%);
+    background: rgba(246, 145, 255, 0.103);
     box-shadow: 0 8px 32px 0 rgba(154, 154, 154, 0.37);
     backdrop-filter: blur(2.2px);
     -webkit-backdrop-filter: blur(2.2px);
@@ -2765,7 +2768,7 @@ blockquote {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    padding: 0px 50px;
+    padding: 0px 0px;
 }
 
 .drag-area:hover {
@@ -2914,7 +2917,8 @@ button {
     font-weight: 400;
     position: relative;
     padding: 12px 35px;
-    background: linear-gradient(45deg, #8B5F8B, #9400D3);
+    background: linear-gradient(45deg, #8B5F8B, #9400d3e3);
+    ;
     /* Violet Gradient */
     font-size: 17px;
     font-weight: 500;
@@ -2993,9 +2997,9 @@ button {
 }
 
 .uploadbutton:hover {
-    border: 2px solid #3E007F;
+    border: 2px solid #9400D3;
     background: #f5f5f5;
-    color: #3E007F;
+    color: #9400D3;
     transition: all .3s ease-in-out;
 }
 
@@ -3063,6 +3067,8 @@ button {
     margin-top: 15px;
     display: flex;
     justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }
 
 input #file-input {

templates/index.html

@@ -128,9 +128,8 @@
         }
         
         #generated-image-container img {
-            width: 250px;
             height: 250px;
-            padding: 10px;
+            padding: 20px 0px;
         }
         
         .loaderx {
@@ -326,9 +325,79 @@
         }
         
         .disabled-button {
-            background-color: #ccc;
-            /* Set your desired grey color */
+            background: linear-gradient(45deg, #6b486b, #7100a1);
+            opacity: 0.5;
             cursor: not-allowed;
+            box-shadow: 0 0 0 #7a65878c;
+            pointer-events: none;
+        }
+        
+        .zoom-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .zoom-content {
+            max-width: 80%;
+            max-height: 80%;
+            text-align: center;
+            /* Center the content horizontally */
+            position: relative;
+        }
+        
+        .zoom-image {
+            position: relative;
+            max-width: 40%;
+            max-height: 40%;
+            margin: 0 auto;
+            /* Center the image horizontally */
+            display: block;
+            /* Remove default inline styling */
+            border-radius: 10px;
+        }
+        
+        .image-container {
+            position: relative;
+        }
+        
+        .exit-modal-button-top-right {
+            position: sticky;
+            right: 0;
+            left: 67%;
+            z-index: 1;
+            background-color: #de2d2d9e;
+            color: #ffffff;
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+            border-radius: 5px 5px 5px 0px;
+        }
+        
+        .label {
+            display: block;
+            /* Display the label as a block to force it on top */
+            margin-bottom: 10px;
+            /* Add some spacing between label and input/button */
+        }
+        
+        .input-button-container {
+            display: inline-block;
+            /* Display the input and button on the same line */
+        }
+        
+        .footer {
+            padding: 10px;
+            text-align: center;
+            position: sticky;
+            bottom: 0;
+            width: 100%;
         }
     </style>
 </head>
@@ -354,10 +423,11 @@
                     <!-- Banner Content -->
                     <div id="banner-content" class="row clearfix">
                         <!-- Left column -->
-                        <h1>
-                        </h1>
+                        <h2>
+                            <br><br>
+                        </h2>
                         <div class="col-lg-3 wow bounceInUp" data-wow-offset="2" data-wow-duration="1.5s" data-wow-delay="0.2s">
-                            <h1>Welcome to the <span class="easytext">FIFA Player Avatar</span> Generator!</h1>
+                            <h1>Welcome to<br> <span class="easytext">FIFA Player Avatar</span> Generator!</h1>
                             <h2>Our cutting-edge graphics ensure that your FIFA player avatar looks as lifelike as possible, bringing an unparalleled level of realism to your virtual soccer experience.</h2>
                         </div>
                         <!-- right (wider) -->
@@ -379,13 +449,15 @@
                                                 <circle class="loader-ring loader-ring-c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
                                                 <circle class="loader-ring loader-ring-d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"></circle>
                                             </svg></div>
-                                            <p id="instructions">ⓘ Click the button to generate your FiFa Player Avatar. Generated images will show here.</p>
+                                            <p id="instructions">ⓘ Click the button to generate your FiFa Player Avatar. Generated images will shown here, you can click the picture to zoom.</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" value="Upload" onclick="handleGenerateClick()">Generate
-                        <div class="star-1">
+                                        <label for="n_samples">Choose or enter the desired number of samples (4-20):</label>
+                                        <input type="number" id="n_samples" name="n_samples" value="4" min="4" max="20">
+                                        <button class="uploadbutton wow bounceInUp" data-wow-offset="3" data-wow-duration="1.5s" data-wow-delay="0.5s" type="submit" value="Upload" onclick="handleGenerateClick()">Generate 
+                                                <div class="star-1">
                             <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve"
                                 xmlns="http://www.w3.org/2000/svg">
                                 <defs>
@@ -494,12 +566,22 @@
                     </div>
                     <!--End of Row-->
                 </header>
+                <div class="footer wow bounceInUp" data-wow-offset="3" data-wow-duration="2s" data-wow-delay="0.5s">
+                    <p>Developed by Dave Fagarita | Jimuel Servandil | Jannica Mae Magno | Jeziah Lois Catanus</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="zoomModal" class="zoom-modal">
+        <div class="zoom-content">
+            <div id="zoomedImageContainer" class="image-container">
+                <button class="exit-modal-button-top-right" onclick="closeZoomModal()">x</button>
+                <img id="zoomedImage" class="zoom-image" alt="Zoomed Image">
             </div>
         </div>
     </div>
 
     <!-- index_ajax.html -->
-
     <script>
         function handleGenerateClick() {
             // Get the generated image container
@@ -512,6 +594,9 @@
             generateButton.disabled = true;
             generateButton.classList.add("disabled-button");
 
+            // Change the button text to "Generating..."
+            generateButton.innerText = "Generating...";
+
             // Hide the generated image
             generatedImageContainer.style.display = "none";
 
@@ -525,12 +610,20 @@
             // Make an AJAX request to update the generated image
             fetch("/generate", {
                     method: "POST",
+                    body: new URLSearchParams({
+                        n_samples: document.querySelector("input[name='n_samples']").value,
+                    }),
                 })
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
                         // Update the generated image directly
-                        generatedImageContainer.innerHTML = '<img src="data:image/png;base64,' + data.generated_image + '" alt="Generated Image">';
+                        generatedImageContainer.innerHTML = '<img src="data:image/png;base64,' + data.generated_image + '" alt="Generated Image" onclick="openZoomModal(this)">';
+
+                        // Enable the button, remove the disabled style, and restore the original text
+                        generateButton.disabled = false;
+                        generateButton.classList.remove("disabled-button");
+                        generateButton.innerText = "Generate";
                     } else {
                         // Handle error if needed
                         console.error("Image generation failed");
@@ -541,10 +634,6 @@
 
                     // Show the generated image
                     generatedImageContainer.style.display = "block";
-
-                    // Enable the button and remove the disabled style
-                    generateButton.disabled = false;
-                    generateButton.classList.remove("disabled-button");
                 })
                 .catch(error => {
                     // Handle error if needed
@@ -554,11 +643,24 @@
                     // Show the generated image even in case of an error
                     generatedImageContainer.style.display = "block";
 
-                    // Enable the button and remove the disabled style
+                    // Enable the button, remove the disabled style, and restore the original text
                     generateButton.disabled = false;
                     generateButton.classList.remove("disabled-button");
+                    generateButton.innerText = "Generate";
                 });
         }
+
+        // Function to open the zoom modal
+        function openZoomModal(imageElement) {
+            var zoomedImage = document.getElementById("zoomedImage");
+            zoomedImage.src = imageElement.src;
+            document.getElementById("zoomModal").style.display = "flex";
+        }
+
+        // Function to close the zoom modal
+        function closeZoomModal() {
+            document.getElementById("zoomModal").style.display = "none";
+        }
     </script>