Upload 6 files

app.py

@@ -0,0 +1,116 @@
+import pickle
+import streamlit as st
+import numpy as np
+
+# Load artifacts
+model = pickle.load(open('artifacts/model.pkl', 'rb'))
+book_names = pickle.load(open('artifacts/book_names.pkl', 'rb'))
+final_rating = pickle.load(open('artifacts/final_rating.pkl', 'rb'))
+book_pivot = pickle.load(open('artifacts/book_pivot.pkl', 'rb'))
+
+# Function to fetch poster URLs
+def fetch_poster(suggestion):
+    book_name = []
+    ids_index = []
+    poster_url = []
+
+    for book_id in suggestion:
+        book_name.append(book_pivot.index[book_id])
+
+    for name in book_name[0]:
+        ids = np.where(final_rating['title'] == name)[0][0]
+        ids_index.append(ids)
+
+    for idx in ids_index:
+        url = final_rating.iloc[idx]['image_url']
+        poster_url.append(url)
+
+    return poster_url
+
+# Function to recommend books
+def recommend_book(book_name):
+    books_list = []
+    book_id = np.where(book_pivot.index == book_name)[0][0]
+    distance, suggestion = model.kneighbors(book_pivot.iloc[book_id, :].values.reshape(1, -1), n_neighbors=4)
+
+    poster_url = fetch_poster(suggestion)
+    
+    for i in range(len(suggestion[0])):
+        book = book_pivot.index[suggestion[0][i]]
+        books_list.append(book)
+    
+    return books_list[1:], poster_url[1:]  # Skip the input book itself
+
+# Apply custom CSS for glassmorphism
+def local_css(file_name):
+    with open(file_name) as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
+# Page configuration
+st.set_page_config(page_title='Book Recommendation System', layout='centered')
+
+# Load CSS for styling
+local_css("style.css")
+
+# Add a fancy header with emojis
+st.markdown("""
+    <div class="glass">
+        <h1>📚Book Finder📚</h1>
+        <p>Let AI find your perfect book match.</p>
+    </div>
+""", unsafe_allow_html=True)
+
+# Centered dropdown for book selection with glass effect
+st.markdown("""
+    <div class="glass">
+        <p>🔎 Type or select a book from the dropdown</p>
+    </div>
+""", unsafe_allow_html=True)
+
+# Dropdown for book selection
+selected_books = st.selectbox("", book_names)
+
+# Apply custom button styling to Streamlit's default button using CSS
+st.markdown("""
+    <style>
+        .stButton > button {
+            background: linear-gradient(135deg, #8B5E3C, #B8860B); /* Warm vintage gold-brown gradient */
+            border: none;
+            color: white; /* White text */
+            padding: 12px 24px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 10px 5px;
+            cursor: pointer;
+            border-radius: 12px; /* Rounded corners for a soft vintage touch */
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Soft, deep shadow for antique feel */
+            font-family: 'Georgia', serif; /* Classic serif font for the button */
+            text-transform: uppercase; /* Uppercase text for a formal touch */
+        }
+
+        .stButton > button:hover {
+            background: linear-gradient(135deg, #704214, #B8860B); /* Slightly darker gold-brown */
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth on hover */
+            transform: translateY(-2px); /* Lift effect */
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+# Streamlit button with custom styling applied
+if st.button('Show Recommendation', key='show_recommendation_button'):
+    recommended_books, poster_url = recommend_book(selected_books)
+
+    # Display recommendations in a grid
+    st.markdown("<h3>Recommended Books:</h3>", unsafe_allow_html=True)
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        st.markdown(f"<div class='glass'><p>{recommended_books[0]}</p></div>", unsafe_allow_html=True)
+        st.image(poster_url[0])
+    with col2:
+        st.markdown(f"<div class='glass'><p>{recommended_books[1]}</p></div>", unsafe_allow_html=True)
+        st.image(poster_url[1])
+    with col3:
+        st.markdown(f"<div class='glass'><p>{recommended_books[2]}</p></div>", unsafe_allow_html=True)
+        st.image(poster_url[2])

artifacts/book_names.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:794d08c3eb7ee65bf95008096b99fdcba5376e3794e313ade38d5781451e46a2
+size 20131

artifacts/book_pivot.pkl

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

artifacts/final_rating.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8577344ac2ae44e75fadef7f0609903cb6c66972df8502ccb20eefd41ba92d0d
+size 3811461

artifacts/model.pkl

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

style.css

@@ -0,0 +1,84 @@
+/* Apply the background image to the entire app */
+.stApp {
+    background-image: url('https://i.postimg.cc/g2w7q0TM/books-1.jpg'); 
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed; /* Ensure the background image stays fixed */
+}
+
+/* Glassmorphism design for elements with the class "glass" */
+.glass {
+    background: rgba(255, 255, 255, 0.1); /* Translucent background */
+    backdrop-filter: blur(10px); /* Blurring effect */
+    border-radius: 10px; /* Rounded corners */
+    padding: 20px; /* Spacing inside the box */
+    margin: 20px; /* Space around the box */
+    color: #ffffff; /* Text color */
+    font-weight: bold; /* Bold text */
+    text-align: center; /* Center the text */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add shadow */
+}
+
+/* Blurred dropdown styling */
+.stSelectbox {
+    background: rgba(255, 255, 255, 0.1); /* Translucent background */
+    backdrop-filter: blur(8px); /* Blur effect */
+    color: #ffffff; /* White text */
+    font-weight: bold; /* Bold text */
+    border-radius: 10px; /* Rounded corners */
+    margin-top: 10px; /* Space above the dropdown */
+}
+
+/* Centered custom button container */
+.custom-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px; /* Space above the button */
+}
+
+/* Centered custom button styling for "Show Recommendation" */
+.custom-button {
+    background: linear-gradient(135deg, #8B5E3C, #B8860B); /* Warm vintage gold-brown gradient */
+    border: none;
+    color: white; /* White text */
+    padding: 12px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 10px 5px;
+    cursor: pointer;
+    border-radius: 12px; /* Rounded corners for a soft vintage touch */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Soft, deep shadow for antique feel */
+    font-family: 'Georgia', serif; /* Classic serif font for the button */
+    text-transform: uppercase; /* Uppercase text for a formal touch */
+    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
+}
+
+/* Hover effect for "Show Recommendation" button */
+.custom-button:hover {
+    background: linear-gradient(135deg, #704214, #B8860B); /* Slightly darker gold-brown */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth on hover */
+    transform: translateY(-2px); /* Lift effect */
+}
+
+/* Button hover styling for specific button containers */
+.stButton > button:hover {
+    background-color: #704214; /* Darker warm brown on hover */
+    border: 1px solid #B8860B; /* Add a border on hover */
+}
+
+/* Optional: Style for text and titles */
+h1, h2, h3, h4 {
+    font-family: 'Georgia', serif; /* Elegant font family */
+    color: #ffffff;
+    text-align: center; /* Centered titles */
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle text shadow for emphasis */
+}
+
+p {
+    font-family: 'Georgia', serif;
+    color: #ffffff;
+    text-align: center;
+}