Add sentiment as a dropdown while uploading images

Database/userdatahandler.py

@@ -67,14 +67,15 @@ def get_user_by_username(username: str):
     return user
 
 # Save image to MongoDB  
-def save_image(username, filename, title, description, time_created,audio_filename=None):
+def save_image(username, filename, title, description, time_created,audio_filename=None,sentiment=None):
     image = {
         'username': username,
         'filename': filename,
         'title': title,
         'description': description,
         'created_at': time_created,
         'audio_filename': audio_filename,
+        'sentiment': sentiment
     }
     beehive_image_collection.insert_one(image)
 
@@ -109,7 +110,7 @@ def get_currentuser_from_session():
 # Get all images from MongoDB
 def get_images_by_user(username):
     images = beehive_image_collection.find({'username': username})
-    return [{'id': str(image['_id']), 'filename': image['filename'], 'title': image['title'], 'description': image['description'], 'audio_filename': image.get('audio_filename', "")} for image in images]
+    return [{'id': str(image['_id']), 'filename': image['filename'], 'title': image['title'], 'description': image['description'], 'audio_filename': image.get('audio_filename', ""), 'sentiment':image.get('sentiment', "")} for image in images]
 
 # Update image in MongoDB
 def update_image(image_id, title, description):

app.py

@@ -183,8 +183,9 @@ def upload_images():
 
     files = request.files.getlist('files')  # Supports multiple file uploads
     title = request.form.get('title', '')
+    sentiment = request.form.get('sentiment')
     description = request.form.get('description', '')
-    audio_data = request.form.get('audioData')  # Retains audio support
+    audio_data = request.form.get('audioData')
 
     for file in files:
         if file and allowed_file(file.filename):
@@ -203,20 +204,20 @@ def upload_images():
                 with open(audio_path, "wb") as f:
                     f.write(audio_binary)
 
-            time_created = datetime.datetime.now()
-            save_image(user['username'], filename, title, description, time_created, audio_filename)
-            flash('Image uploaded successfully!', 'success')
+        time_created = datetime.datetime.now()
+        save_image(user['username'], filename, title, description, time_created, audio_filename, sentiment)
+        flash('Image uploaded successfully!', 'success')
 
             # Generate PDF thumbnail if applicable
-            if filename.lower().endswith('.pdf'):
+        if filename.lower().endswith('.pdf'):
                 generate_pdf_thumbnail(filepath, filename)
 
         else:
             flash('Invalid file type or no file selected.', 'danger')
 
     return redirect(url_for('profile'))
 
-
+# generate thumbnail for the pdf
 def generate_pdf_thumbnail(pdf_path, filename):
     """Generate an image from the first page of a PDF using PyMuPDF."""
     # Ensure the thumbnails directory exists
@@ -225,6 +226,7 @@ def generate_pdf_thumbnail(pdf_path, filename):
 
     pdf_document = fitz.open(pdf_path)
 
+    #select only the first page for the thumbnail
     first_page = pdf_document.load_page(0)
 
     zoom = 2  # Increase for higher resolution

static/css/index.css

@@ -41,4 +41,17 @@ button {
 
 button:hover {
     background: #212121;
+}
+
+@media screen and (max-width: 600px) {
+    h2 {
+        font-size: 20px;
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    .material-icons {
+        font-size: 50px;
+    }
+
 }

static/css/profile.css

@@ -668,3 +668,45 @@ h2{
   .button:active {
     border: 1px solid #146c54;
   }
+
+  /* Dropdown Label Styling */
+.dropdown-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 5px;
+    margin-top: 10px;
+}
+
+/* Dropdown Styling */
+.dropdown {
+    width: 80%;
+    max-width: 300px;
+    padding: 10px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    background-color: #fff;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    margin-bottom: 20px;
+}
+
+/* Hover and Focus Effects */
+.dropdown:hover {
+    border-color: #007bff;
+}
+
+.dropdown:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    outline: none;
+}   
+
+.sentiment {
+    margin-bottom: 10px;
+    color: #6c52ff;
+    font-weight: bold;
+    font-size: 16px;
+}

static/sentiments.json

@@ -0,0 +1,29 @@
+{
+    "sentiments": [
+        "Cannot Decide",
+        "Joyful",
+        "Melancholic",
+        "Hopeful",
+        "Lost in Thought",
+        "Peaceful",
+        "Empowered",
+        "Longing",
+        "Triumphant",
+        "Vulnerable",
+        "Liberated",
+        "Inspired",
+        "Nostalgic",
+        "Celebratory",
+        "Serene",
+        "Defiant",
+        "Lonely",
+        "Grateful",
+        "Reflective",
+        "Bittersweet",
+        "Determined",
+        "Frustrated",
+        "Content",
+        "Yearning",
+        "Uncertain"
+    ]
+}

templates/profile.html

@@ -191,6 +191,19 @@
     }, 2000); 
 }
 
+//function for fetching sentiments from sentiment.json
+fetch("{{ url_for('static', filename='sentiments.json') }}")
+        .then(response => response.json())
+        .then(data => {
+            const sentimentDropdown = document.getElementById("sentiment");
+            data.sentiments.forEach(sentiment => {
+                let option = document.createElement("option");
+                option.value = sentiment;
+                option.textContent = sentiment;
+                sentimentDropdown.appendChild(option);
+            });
+        })
+        .catch(error => console.error("Error loading sentiments:", error));
     </script>
     <script src="{{ url_for('static', filename='js/dragdrop.js') }}"></script>
 </head>
@@ -222,6 +235,11 @@ <h1>{{ username }}</h1>
                 <input class="file-button" type="file" name="files" id="fileInput" multiple accept=".jpg,.jpeg,.png,.gif,.webp,.heif,.pdf" required onchange="validateFile(this)"><br>            
                 <input class="title-area" type="text" name="title" placeholder="Title" required><br>
                 <textarea class="description-area" name="description" placeholder="Description" required></textarea><br>
+                <label for="sentiment" class="dropdown-label">Select Sentiment with which you are uploading the image:</label>
+                <select name="sentiment" id="sentiment" required class="dropdown">
+                 <option value="" disabled selected>Choose a Sentiment</option>
+                </select>
+
 
                 <button type="button" onclick="startRecording()" class="record-btn">Start Recording</button>
                 <button type="button" onclick="stopRecording()" class="stop-btn" disabled id="stopBtn">Stop Recording</button>
@@ -267,6 +285,7 @@ <h2 style="text-align: center;">Uploaded Images</h2>
             {% endif %}
             <h3>{{ image.title }}</h3>
             <p>{{ image.description }}</p>
+            <div class="sentiment">sentiment : {{ image.sentiment }}</div>
             <button class="more-info-button" onclick="toggleMoreInfo('{{ image.id }}')">More Info</button>
             <div id="moreInfo_{{ image.id }}" class="more-info" style="display: none;">
                 <button class="edit-button" onclick="toggleEditForm('{{ image.id }}')">Edit</button>
@@ -278,7 +297,7 @@ <h3>{{ image.title }}</h3>
                     </form>
                 </div><br><br>
                 <a href="{{ url_for('delete_image_route', image_id=image.id) }}" class="delete-button">Delete</a>
-                <br><br>
+                <br><br>    
                 <a href="{{ url_for('static', filename='uploads/' ~ image.filename) }}" 
                 download="{{ image.filename }}" 
                 class="download-button">

templates/user_images.html

@@ -116,7 +116,7 @@ <h2 style="text-align: center;">Uploaded Images</h2>
             {% endif %}
             <h3>{{ image.title }}</h3>
             <p>{{ image.description }}</p>
-
+            <div class="sentiment">sentiment : {{ image.sentiment }}</div>
             <button class="more-info-button" onclick="toggleMoreInfo('{{ image.id }}')">More Info</button>
             <div id="moreInfo_{{ image.id }}" class="more-info" style="display: none;">
                 <button class="edit-button" onclick="toggleEditForm('{{ image.id }}')">Edit</button>