Added Managing Area

app.py

@@ -1,16 +1,18 @@
 from flask import Flask,render_template,request,jsonify
+from manage import manage
 from nft import Creator
 
 app = Flask(__name__,template_folder='templates')
+app.register_blueprint(manage)
 
 @app.route('/')
 def hello():
     return render_template('index.html')
 
 @app.route('/mint',methods=['POST'])
-def mint():    
-    with Creator() as creator:        
-        return jsonify(creator.mint_nft(int(request.json["count"])))
+def mint():              
+    with Creator() as c:        
+        return jsonify(c.mint_nft(int(request.json["count"])))
 
 if __name__ == '__main__':
     app.run(debug=True)

manage.py

@@ -0,0 +1,24 @@
+from flask import Blueprint, render_template, jsonify, request
+from nft import Creator
+
+manage = Blueprint('manage', __name__,url_prefix='/manage')
+
+@manage.route('/')
+def home():
+    with Creator() as c:
+        return render_template('layers.html')
+
+@manage.route('/layers')
+def layers():
+    with Creator() as c:
+        return jsonify(c.get_layers())
+
+@manage.route('/upload', methods=['POST'])
+def upload():
+    with Creator() as c:
+        return c.upload_layer(request.form,request.files)      
+
+@manage.route('/delete', methods=['GET'])
+def delete():
+    with Creator() as c:
+        return c.delete_layer(request.args)

nft.py

@@ -9,32 +9,51 @@
 import datetime
 
 class Creator:
-    def __init__(self) -> None:        
-        with open('images/bg.png', 'rb') as f:
-            self.bg = Image.open(f).convert('RGBA')       
-        self.faces = [ f'images/faces/{x}' for x in os.listdir('images/faces') if x.endswith('.png') ]
-        self.eyes = [ f'images/eyes/{x}' for x in os.listdir('images/eyes') if x.endswith('.png') ] 
-        self.mouths = [ f'images/mouths/{x}' for x in os.listdir('images/mouths') if x.endswith('.png') ]
-        self.hats = [ f'images/hats/{x}' for x in os.listdir('images/hats') if x.endswith('.png') ]       
+    def __init__(self) -> None:
+        self.layer_foler = 'static/images/layers'        
+        self.bgs = [ f'static/images/layers/bgs/{x}' for x in os.listdir('static/images/layers/bgs') if x.endswith('.png') ]
+        self.faces = [ f'static/images/layers/faces/{x}' for x in os.listdir('static/images/layers/faces') if x.endswith('.png') ]
+        self.eyes = [ f'static/images/layers/eyes/{x}' for x in os.listdir('static/images/layers/eyes') if x.endswith('.png') ] 
+        self.mouths = [ f'static/images/layers/mouths/{x}' for x in os.listdir('static/images/layers/mouths') if x.endswith('.png') ]
+        self.hats = [ f'static/images/layers/hats/{x}' for x in os.listdir('static/images/layers/hats') if x.endswith('.png') ]       
 
     def __enter__(self) -> None:
         return self
 
     def __exit__(self, exc_type, exc_value, traceback) -> None:
         pass
 
+    def get_layers(self) -> list:
+        return [
+            {'name': 'bgs','items': self.bgs},  
+            {'name': 'faces','items': self.faces}, 
+            {'name': 'eyes','items': self.eyes}, 
+            {'name': 'mouths','items': self.mouths}, 
+            {'name': 'hats','items': self.hats}
+        ]       
+
+    def upload_layer(self,form,file) -> dict:              
+        file['image'].save(f'{self.layer_foler}/{form["layer"]}/{uuid4().hex}.png')
+        return {'success': True}
+
+    def delete_layer(self,location) -> dict:
+        os.remove(f'{location.get("image")}')        
+        return {'success': True}
+
     def generate_nft(self) -> PILImage:
+        bg = random.choice(self.bgs)
         face = random.choice(self.faces)
         eye = random.choice(self.eyes)
         mouth = random.choice(self.mouths)
         hat = random.choice(self.hats)
 
+        bg_img = Image.open(bg).convert('RGBA')
         face_img = Image.open(face).convert('RGBA')
         eye_img = Image.open(eye).convert('RGBA')
         mouth_img = Image.open(mouth).convert('RGBA')
         hat_img = Image.open(hat).convert('RGBA')
 
-        com1 = Image.alpha_composite(self.bg, face_img)  
+        com1 = Image.alpha_composite(bg_img, face_img)  
         com2 = Image.alpha_composite(com1, eye_img)
         com3 = Image.alpha_composite(com2, mouth_img)
         com4 = Image.alpha_composite(com3, hat_img)
@@ -63,8 +82,4 @@ def mint_nft(self, count:int = 1) -> list:
                 'created_at' : datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
             })
         return nfts
-
-nfts = Creator().mint_nft(2)
-print(nfts[0]["image"] == nfts[1]["image"])
-
 

static/css/style.css

@@ -0,0 +1,64 @@
+button {
+    align-items: center;
+    background-clip: padding-box;
+    background-color: #00c0fa;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    justify-content: center;
+    line-height: 1.25;
+    margin: 0;
+    min-height: 3rem;
+    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
+    position: relative;
+    text-decoration: none;
+    transition: all 250ms;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    vertical-align: baseline;
+    width: auto;
+}
+button:hover,
+button:focus {
+    background-color: #32eafb;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
+}
+button:hover {
+    transform: translateY(-1px);
+}
+button:active {
+    background-color: #0099c8;
+    box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
+    transform: translateY(0);
+}
+.nfts {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-gap: 20px;
+}
+
+.nft {
+    display: grid;
+}
+
+.nft img {    
+width: 100%;
+height: 100%;
+}
+
+input {
+    height: 1.8rem;
+}
+
+select {
+    height: 2.5rem;
+
+}

static/images/layers.json

@@ -0,0 +1,3 @@
+{
+
+}

templates/index.html

@@ -5,71 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NFT Generator</title>   
-    <style>
-    button {
-        align-items: center;
-        background-clip: padding-box;
-        background-color: #00c0fa;
-        border: 1px solid transparent;
-        border-radius: .25rem;
-        box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
-        box-sizing: border-box;
-        color: #fff;
-        cursor: pointer;
-        display: inline-flex;
-        font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
-        font-size: 16px;
-        font-weight: 600;
-        justify-content: center;
-        line-height: 1.25;
-        margin: 0;
-        min-height: 3rem;
-        padding: calc(.875rem - 1px) calc(1.5rem - 1px);
-        position: relative;
-        text-decoration: none;
-        transition: all 250ms;
-        user-select: none;
-        -webkit-user-select: none;
-        touch-action: manipulation;
-        vertical-align: baseline;
-        width: auto;
-    }
-    button:hover,
-    button:focus {
-        background-color: #32eafb;
-        box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
-    }
-    button:hover {
-        transform: translateY(-1px);
-    }
-    button:active {
-        background-color: #0099c8;
-        box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
-        transform: translateY(0);
-    }
-    .nfts {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-        grid-gap: 20px;
-    }
-
-    .nft {
-        display: grid;
-    }
-
-    .nft img {    
-    width: 100%;
-    height: 100%;
-    }
-
-    </style> 
+    <link rel="stylesheet" href="/static/css/style.css">    
 </head>
 <body>
     <input type="number" name="count" id="count" value="1">
     <button onclick="create_nft()">
-        MINT NFT
+        Mint
     </button>
 
+    <button onclick="window.location.replace('/manage')">
+        Manage
+    </button>
+
     <div class="nfts">                           
     </div>
 

templates/layers.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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>Manage</title>
+  <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+  <label for="layer">Layer:</label>
+  <select name="layer" id="layer">
+    <option value="" selected disabled>None</option>
+  </select>
+  <input type="file" id="file" name="image" hidden>
+  <button onclick="document.getElementById('file').click()">Upload</button>
+
+  <div class="nfts">    
+  </div>
+
+  <script>
+    var layers;
+
+    fetch('layers')
+    .then(res => res.json())
+    .then(data => {
+      const select =  document.querySelector('#layer');
+      data.forEach(layer => {
+        const option = document.createElement('option');
+        option.value = layer.name;     
+        option.innerText = layer.name.charAt(0).toUpperCase() + layer.name.slice(1);
+        select.appendChild(option);
+      });
+      layers = data;
+    });
+
+    document.querySelector('#layer').addEventListener('change', (e) => {  
+      e.preventDefault();
+      document.querySelector('.nfts').innerHTML = '';    
+      layers.forEach(element => {
+        if(element.name ==e.target.value){
+          element.items.forEach(item => {
+            const nft = document.createElement('div');
+            nft.className = 'nft';            
+
+            const img = document.createElement('img');
+            img.src = `/${item}`;
+
+            deletebtn = document.createElement('button');
+            deletebtn.innerText = 'Delete';
+            deletebtn.onclick = () => {
+              fetch(`delete?image=${item}`)
+              .then(res => res.json())
+              .then(data => {
+                if(data.success){
+                  window.location.reload();
+                }else{
+                  alert('Failed to delete');
+                }
+              });
+            } 
+
+            nft.appendChild(img);
+            nft.appendChild(deletebtn);
+
+            document.querySelector('.nfts').appendChild(nft);
+          });
+        }
+      });
+    });
+
+    document.querySelector('#file').addEventListener('change', (e) => {
+      e.preventDefault();   
+      const formData = new FormData();      
+      formData.append('image', e.target.files[0]);
+      formData.append('layer', document.querySelector('#layer').value);
+      if(document.querySelector('#layer').value === ''){
+        alert('Please select a layer');     
+        document.querySelector('#file').value = '';
+        return;
+      }else{
+        fetch('upload', {
+          method: 'POST',
+          body: formData
+        })
+        .then(res => res.json())
+        .then(data => {
+          console.log(data);
+          if(data.success){
+            alert('Uploaded..!');  
+            window.location.reload();
+          }else{
+            alert('Failed to upload');
+          }
+        });
+        document.querySelector('#file').value = '';
+      }
+    });
+
+
+  </script>
+
+
+</body>
+</html>