made site responsive resolved image error in add products section

app.py

@@ -3,7 +3,6 @@ import numpy as np
 from sklearn.metrics.pairwise import cosine_similarity
 import matplotlib.pyplot as plt
 import pandas as pd
-import pickle
 import os
 import json
 import re
@@ -16,14 +15,14 @@ folder='static/images'
 app.config["UPLOAD_FOLDER"]=folder
 user="null"
 pair={}
-def pred_ver_and_save_data(img,img_file,data,digit,name,vector,brand,desc,cat,price):
+def pred_ver_and_save_data(img,img_name,data,digit,name,vector,brand,desc,cat,price):
     try:
         ans=alg.tell_vernelable(img)
     except Exception as e:
         ans=0.000001   
     vector=list(vector)     
     if ans>0.5:
-        data[f"id{digit+1}"]={"name":name,"description":desc,"reviews":[],"clicks":0,"category":cat,"price":price,"brand":brand,"img":f"images/{img_file.filename}","vector":vector}
+        data[f"id{digit+1}"]={"name":name,"description":desc,"reviews":[],"clicks":0,"category":cat,"price":price,"brand":brand,"img":f"images/{img_name}","vector":vector}
     else: 
         data[f"id{digit+1}"]={"name":name,"description":desc,"reviews":[],"clicks":0,"category":cat,"price":price,"brand":brand,"img":'images/error.png',"vector":vector} 
     with open("products.json","w") as file:
@@ -138,18 +137,18 @@ def seller():
     with open("products.json") as file:
         prod=json.load(file)
     file.close()
-    return render_template("seller_dashboard.html",product=prod,ids=products,reviews=reviews)
+    return render_template("seller_dashboard.html",user=user,product=prod,ids=products,reviews=reviews)
 @app.route("/tell",methods=['POST',"GET"])
 def tell():
     if request.method=="GET":
         return render_template("add_product.html")
     else:
-        img_file=request.files["image"] 
-        image_data=img_file.read()
-        img=Image.open(BytesIO(image_data))
-        img=np.expand_dims(np.array(img.resize((256,256))).astype(np.float32)/255,axis=0)
-        image_path=os.path.join(app.config['UPLOAD_FOLDER'],img_file.filename)
-        img_file.save(image_path)
+        img_file=request.files["image"]
+        img_name=img_file.filename
+        img_file=Image.open(img_file.stream).convert("RGB")
+        image_path=os.path.join(app.config['UPLOAD_FOLDER'],f"{img_name.split('.')[0]}.jpg")
+        img_file.save(image_path,"JPEG")
+        img=np.expand_dims(np.array(img_file.resize((256,256))).astype(np.float32)/255,axis=0)
         with open("products.json") as file:
             data=json.load(file)
         file.close()    
@@ -161,25 +160,23 @@ def tell():
         brand=request.form["brand"]
         price=request.form['price']
         vector=name+" "+brand+" "+desc
-        with open("tokenize_description.pkl","rb") as file:
-            tokenizer=pickle.load(file)
-        file.close()    
+        with open("tokenize_description.json","r") as file:
+            tokenizer=json.load(file)   
         with open("seller.json") as file:
             seller=json.load(file)
-        file.close()
         new_product_id = f"id{digit+1}"
         if new_product_id not in seller[user]["products"]:
             seller[user]["products"].append(new_product_id)     
         with open("seller.json","w") as file:
             json.dump(seller,file)
         file.close()    
-        seq=[tokenizer.word_index[word] for word in vector.split() if word in tokenizer.word_index]
+        seq=[tokenizer[word] for word in vector.split() if word in tokenizer.keys()]
         if len(seq)<=22:
             vector=np.pad(seq,(22-len(seq),0))
         else:
             vector=np.array(vector[:22])  
-        threading.Thread(target=pred_ver_and_save_data,args=(img,img_file,data,digit,name,vector,brand,desc,cat,price)).start()     
-        return render_template("seller_dashboard.html",ids=seller[user]["products"][:-1],product=data,reviews=seller[user]["reviews"])
+        threading.Thread(target=pred_ver_and_save_data,args=(img,img_name,data,digit,name,vector,brand,desc,cat,price)).start()     
+        return render_template("seller_dashboard.html",user=user,ids=seller[user]["products"][:-1],product=data,reviews=seller[user]["reviews"])
 @app.route("/chatbot",methods=["GET","POST"])   
 def chatbot():
     if request.method=="GET":    

requirements.txt

@@ -1,5 +1,4 @@
 onnxruntime
- keras
 scikit-learn
 matplotlib
 pandas 

seller.json

@@ -1 +1 @@
-{"username1": {"password": 123, "products": ["id1"], "reviews": ["this product is useless", "you are worst", "quality is poor", "not worth the price", "delivered late", "item damaged", "waste of money", "terrible experience", "not recommended", "customer service is bad"]}, "username2": {"password": 123, "products": ["id2"], "reviews": ["amazing quality", "not worth the price", "fast shipping", "great product", "superb quality", "perfect as described", "worth every penny", "customer service was helpful", "highly recommended", "would buy again"]}, "username3": {"password": 123, "products": ["id3"], "reviews": ["fast delivery", "poor packaging", "product arrived broken", "not what I expected", "color is different", "overpriced", "excellent quality", "customer service ignored me", "works perfectly", "great buy"]}, "username4": {"password": 123, "products": ["id4"], "reviews": ["great value for money", "never buying again", "loved it", "very stylish", "does not match description", "cheap material", "exactly what I needed", "highly durable", "better than expected", "shipping was slow"]}, "username5": {"password": 123, "products": ["id5"], "reviews": ["product exceeded expectations", "color is different than shown", "worth the money", "not as advertised", "great product", "customer service was unhelpful", "high quality", "defective item", "came with missing parts", "fantastic experience"]}, "username6": {"password": 123, "products": ["id6"], "reviews": ["would recommend", "terrible customer service", "fantastic purchase", "superb build quality", "not happy with the product", "too expensive", "great performance", "came in excellent packaging", "return process was easy", "item was different from the picture"]}, "username7": {"password": 123, "products": ["id7"], "reviews": ["excellent packaging", "item missing", "shipping was too slow", "love this product", "not as described", "completely broken on arrival", "exactly what I wanted", "very poor material", "well-designed product", "not worth the money"]}, "username8": {"password": 123, "products": ["id8"], "reviews": ["satisfied with the purchase", "too expensive", "great customer service", "did not work as expected", "very high quality", "delivery was quick", "the item is fantastic", "superb craftsmanship", "not durable", "looks cheap"]}, "username9": {"password": 123, "products": ["id9"], "reviews": ["not as described", "arrived late", "works fine", "completely disappointed", "best product I ever bought", "size is incorrect", "colors are vibrant", "not a good experience", "highly recommended", "worst purchase ever"]}, "username10": {"password": 123, "products": ["id10"], "reviews": ["absolutely love it", "not working", "excellent quality", "money well spent", "received wrong item", "customer service was great", "superb value", "totally unreliable", "fast shipping", "best purchase ever"]}, "abdullah": {"password": 123, "products": [], "reviews": []}}
+{"username1": {"password": 123, "products": ["id1"], "reviews": ["this product is useless", "you are worst", "quality is poor", "not worth the price", "delivered late", "item damaged", "waste of money", "terrible experience", "not recommended", "customer service is bad"]}, "username2": {"password": 123, "products": ["id2"], "reviews": ["amazing quality", "not worth the price", "fast shipping", "great product", "superb quality", "perfect as described", "worth every penny", "customer service was helpful", "highly recommended", "would buy again"]}, "username3": {"password": 123, "products": ["id3"], "reviews": ["fast delivery", "poor packaging", "product arrived broken", "not what I expected", "color is different", "overpriced", "excellent quality", "customer service ignored me", "works perfectly", "great buy"]}, "username4": {"password": 123, "products": ["id4"], "reviews": ["great value for money", "never buying again", "loved it", "very stylish", "does not match description", "cheap material", "exactly what I needed", "highly durable", "better than expected", "shipping was slow"]}, "username5": {"password": 123, "products": ["id5"], "reviews": ["product exceeded expectations", "color is different than shown", "worth the money", "not as advertised", "great product", "customer service was unhelpful", "high quality", "defective item", "came with missing parts", "fantastic experience"]}, "username6": {"password": 123, "products": ["id6"], "reviews": ["would recommend", "terrible customer service", "fantastic purchase", "superb build quality", "not happy with the product", "too expensive", "great performance", "came in excellent packaging", "return process was easy", "item was different from the picture"]}, "username7": {"password": 123, "products": ["id7"], "reviews": ["excellent packaging", "item missing", "shipping was too slow", "love this product", "not as described", "completely broken on arrival", "exactly what I wanted", "very poor material", "well-designed product", "not worth the money"]}, "username8": {"password": 123, "products": ["id8"], "reviews": ["satisfied with the purchase", "too expensive", "great customer service", "did not work as expected", "very high quality", "delivery was quick", "the item is fantastic", "superb craftsmanship", "not durable", "looks cheap"]}, "username9": {"password": 123, "products": ["id9"], "reviews": ["not as described", "arrived late", "works fine", "completely disappointed", "best product I ever bought", "size is incorrect", "colors are vibrant", "not a good experience", "highly recommended", "worst purchase ever"]}, "username10": {"password": 123, "products": ["id10"], "reviews": ["absolutely love it", "not working", "excellent quality", "money well spent", "received wrong item", "customer service was great", "superb value", "totally unreliable", "fast shipping", "best purchase ever"]}}

static/css/chatbot.css

@@ -4,7 +4,7 @@
     border: 5px solid black;
     bottom: 20px;
     left: 5px;
-    right: 5%;
+    right:75px;
     height:50px ;
     font-size: larger;
 }
@@ -18,11 +18,11 @@
     border-radius: 20px;
     font-size: larger;
     bottom: 25px;
-    left:95%;
     background-color: black;
     color: white;
     width: 70px;
     height: 50px;
+    right: 0;
 }
 .question{
     width:200px;

static/css/login_style.css

@@ -12,8 +12,9 @@
 
 }
 .element{
+    padding:5px;
     margin-bottom: 10px;
-    border-radius: 10px;
+    border-radius: 5px;
 }
 h1{
     text-align: center;
@@ -35,7 +36,7 @@ body{
     top:0;
     left:0;
     right:0;
-    background-image: url("../images/login.jpg");
+    background-color: aqua;
     background-repeat: no-repeat;
     background-size: 100%;
 }

static/css/product_panel.css

@@ -1,12 +1,13 @@
 .recomendation{
     display:flex;
-    flex-wrap: wrap;  
+    flex-wrap: wrap;
+    justify-content: space-around;  
 }
 .rec_prod{
-    width: 280px;
-    height:450px;
-    margin-left: 10px;
-    margin-bottom: 10px;
-    border: 1px solid wheat;
-    background-color: antiquewhite;
+    text-align: left;
+    font-size: large;
+}
+.buton{
+    padding: 10px;
+    margin: 10px;
 }

static/css/welcome.css

@@ -16,6 +16,7 @@
     right: 15%;
 }
 .welcome{
+    text-align: center;
     font-size: 70px;
     color:white;
 }

templates/product_panel.html

@@ -8,21 +8,25 @@
 </head>
 <body>
     <img src="{{url_for('static',filename=product['img'])}}" alt="product">
-    <h1>{{product["name"]}}</h1>
-    <h2>{{product['price']}}</h2>
+    <h1>Name</h1>
+    <h3>{{product["name"]}}</h3>
+    <h1>Price</h1>
+    <h3>{{product['price']}}</h3>
     <h1>Description</h1>
-    <p>{{product['description']}}</p>
+    <h3>{{product['description']}}</h3>
     <h1>Recomendation<h1>
     <div class="recomendation">
         {% for id_pro in rec_pro %}
-        <a href="{{url_for('product_panel',product_id=id_pro)}}">
-            <div class="rec_prod">
-                <img src="{{url_for('static',filename=rec_pro[id_pro]['img'])}}" alt="image" width="250px" height="250px">
-                <div>{{rec_pro[id_pro]["name"]}}</div>
-                <div>{{rec_pro[id_pro]['brand']}}</div>
-                <div>{{rec_pro[id_pro]['price']}}</div>
-            </div>
-        </a>
+        <form action="{{url_for('product_panel',product_id=id_pro)}}" method="get">
+            <button type="submit" class="buton">
+                <div class="rec_prod">
+                    <img src="{{url_for('static',filename=rec_pro[id_pro]['img'])}}" alt="image" width="250px" height="250px">
+                    <div>{{rec_pro[id_pro]["name"]}}</div>
+                    <div>{{rec_pro[id_pro]['brand']}}</div>
+                    <div>{{rec_pro[id_pro]['price']}}</div>
+                </div>
+            </button>
+        </form>
         {% endfor %}
     </div>
 </body>

templates/products.html

@@ -37,9 +37,16 @@
         font-size: 20px;
         }
         #suggestions{
-            width: 400px; height:50px; border: 1px solid #ccc; display: none; position: absolute; background: white;
-            margin-left: 515px;
+            position: absolute;
+            width: auto;
+            height: 50px;
+            border: 1px solid #ccc; 
+            display: none;
+            background: white;
             font-size: large;
+            margin: 0;
+            right:33%;
+            left:33%;
         }
         .but{
         height: 50px;
@@ -52,11 +59,14 @@
         background-image: linear-gradient(pink,orange);           
         }
         .Products{
-        display: flex;
-        flex-wrap: wrap;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
         }
         .Product{
-        margin: 20px;
+            margin: 20px;
+            text-align: left;
+            font-size: large;
         }
     </style>
 </head>
@@ -68,7 +78,7 @@
             <button type="submit" class="but">Dashboard</button>
         </form>
     </div>
-    <div id="suggestions">hello</div>
+        <div id="suggestions">hello</div>
     <script>
         const searchBox = document.getElementById("searchBox");
         const suggestionsBox = document.getElementById("suggestions");
@@ -115,8 +125,6 @@
                 event.preventDefault();
             }
         });
-
-        // Hide suggestions when clicking outside
         document.addEventListener("click", function(event) {
             if (!searchBox.contains(event.target)) {
                 suggestionsBox.style.display = "none";
@@ -156,13 +164,16 @@
     </div>
     <div class="Products">
         {% for id in products %}
-        <a href="{{url_for("product_panel",product_id=id)}}">
-        <div class="Product">
-            <img src="{{url_for('static',filename=products[id]['img'])}}" alt="img" width="250px" height="250px">
-            <p>{{products[id]['name']}}</p>
-            <p>{{products[id]['price']}}</p>
-            <p>{{products[id]['brand']}}</p>
-        </div>
+        <form action="{{url_for("product_panel",product_id=id)}}">
+            <button type="submit" class="Product">
+                <div class="Product">
+                    <img src="{{url_for('static',filename=products[id]['img'])}}" alt="img" width="250px" height="250px">
+                    <p>{{products[id]['name']}}</p>
+                    <p>{{products[id]['price']}}</p>
+                    <p>{{products[id]['brand']}}</p>
+                </div>
+            </button>
+        </form>
         {%endfor%}
     </div>
     <form action="/chatbot" method="get">

templates/seller_dashboard.html

@@ -13,7 +13,7 @@
                 Marketplace
             </button>
         </form>
-        <h1>Hi {{session['user']}} lets make day of others sweet</h1>
+        <h1>Hi {{user}} lets make day of others sweet</h1>
         <form action="/tell" method="get">
             <button type="submit">Add Products</button>
         </form>

tokenize_description.json

@@ -0,0 +1 @@
+{"and": 1, "a": 2, "skin": 3, "with": 4, "to": 5, "serum": 6, "face": 7, "cream": 8, "that": 9, "organic": 10, "care": 11, "lux": 12, "hashmi": 13, "the": 14, "goat": 15, "milk": 16, "soap": 17, "brighten": 18, "for": 19, "luxury": 20, "ingredients": 21, "hair": 22, "reduce": 23, "shea": 24, "butter": 25, "body": 26, "lotion": 27, "deeply": 28, "infused": 29, "soft": 30, "charcoal": 31, "mask": 32, "anti": 33, "aging": 34, "aloe": 35, "vera": 36, "gel": 37, "rose": 38, "water": 39, "facial": 40, "vitamin": 41, "c": 42, "hand": 43, "whitening": 44, "gentle": 45, "enriched": 46, "nourish": 47, "perfect": 48, "sensitive": 49, "types": 50, "premium": 51, "hydrates": 52, "smoothens": 53, "high": 54, "quality": 55, "radiant": 56, "look": 57, "nourishing": 58, "made": 59, "promote": 60, "shine": 61, "frizz": 62, "moisturizing": 63, "keep": 64, "hydrated": 65, "detox": 66, "purifying": 67, "activated": 68, "remove": 69, "toxins": 70, "cleanse": 71, "pores": 72, "powerful": 73, "reduces": 74, "fine": 75, "lines": 76, "improves": 77, "elasticity": 78, "over": 79, "time": 80, "pure": 81, "soothes": 82, "irritated": 83, "provides": 84, "deep": 85, "hydration": 86, "spray": 87, "refreshing": 88, "mist": 89, "revitalize": 90, "tone": 91, "lightweight": 92, "dark": 93, "spots": 94, "rich": 95, "hydrating": 96, "keeps": 97, "hands": 98, "moisturized": 99, "throughout": 100, "day": 101}

tokenize_description.pkl

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:54cac1a53721b2a05d3dbedcca40d5f54487e6fd35be4839c8c62c08465e30ab
-size 3083