Added some images for looks

app.py

@@ -44,7 +44,7 @@ import torch
 # So first run will load and save resources to global cache, and as user interact and causes rerun of load_model_and_tokenizer(), instead of loading again it will directly use cached resources from memory
 def load_model_and_tokenizer():
     model_name = "google/gemma-2b"  # using gemma-2b for prototype for my GSOC Proposal. Wish me luck.
-    tokenizer = AutoTokenizer.from_pretrained(model_name).to("cpu") # As free tier account got CPU only
+    tokenizer = AutoTokenizer.from_pretrained(model_name)
     # Responsible for automatically downloading and loading the tokenizer configuration and vocabulary associated with the specified pre-trained model.
      # Downloads and loads the tokenizer config and vocab for the given model
     model = AutoModelForCausalLM.from_pretrained(model_name)
@@ -64,7 +64,7 @@ def generate_text(prompt, tone, max_length, temperature=0.7, top_p=0.9, repetiti
     }
     input_text = tone_prompts.get(tone, prompt)
     
-    inputs = tokenizer(input_text, return_tensors="pt").to("cpu") # Don't make me say again, Free tier.
+    inputs = tokenizer(input_text, return_tensors="pt")
     outputs = model.generate(
         inputs["input_ids"],
         max_length=max_length + len(input_text.split()),
@@ -76,19 +76,78 @@ def generate_text(prompt, tone, max_length, temperature=0.7, top_p=0.9, repetiti
     )
     return tokenizer.decode(outputs[0], skip_special_tokens=True)
 
-# Custom CSS for styling
+# Updated CSS for a modern, awesome look
 st.markdown("""
     <style>
-    body {background-color: #f0f0f0;}
-    .title {color: #2c3e50; font-size: 36px; font-weight: bold;}
-    .instructions {color: #34495e; font-size: 18px;}
-    .output-box {background-color: #ecf0f1; padding: 10px; border-radius: 5px;}
+    /* Background image with fallback */
+    .stApp {
+        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/background.png');
+        background-size: cover;
+        background-position: center;
+        color: #ffffff;  /* White text for contrast */
+    }
+    /* Cool gradient title with hover animation */
+    .title {
+        background: linear-gradient(90deg, #00d2ff, #3a7bd5);
+        -webkit-background-clip: text;
+        color: transparent;
+        font-size: 40px;
+        font-weight: bold;
+        transition: transform 0.3s;
+    }
+    .title:hover {
+        transform: scale(1.05);
+    }
+    /* Card-like instructions */
+    .instructions {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 15px;
+        border-radius: 10px;
+        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+        font-size: 18px;
+        color: #e0e0e0;
+    }
+    /* Neon glow output box */
+    .output-box {
+        background: rgba(30, 30, 50, 0.9);
+        padding: 15px;
+        border-radius: 12px;
+        box-shadow: 0 0 15px #00d2ff, 0 0 30px #3a7bd5;
+        font-family: 'Courier New', monospace;
+        font-size: 16px;
+        color: #ffffff;
+        white-space: pre-wrap;
+        animation: glow 1.5s infinite alternate;
+    }
+    @keyframes glow {
+        from { box-shadow: 0 0 10px #00d2ff; }
+        to { box-shadow: 0 0 20px #3a7bd5; }
+    }
+    /* Button hover effect */
+    .stButton>button {
+        background: #3a7bd5;
+        color: white;
+        border-radius: 8px;
+        transition: all 0.3s;
+    }
+    .stButton>button:hover {
+        background: #00d2ff;
+        transform: translateY(-2px);
+    }
+    /* Slider styling */
+    .stSlider>div>div>div {
+        background: #00d2ff !important;
+    }
     </style>
 """, unsafe_allow_html=True)
 
-# App header with image
-st.image("https://unsplash.com/photos/8xznAGy4HcY/download?force=true&w=640", caption="AI in Action")
-st.markdown('<p class="title">Gemma Text Generator</p>', unsafe_allow_html=True)
+# Header with GSoC logo
+col1, col2 = st.columns([3, 1])
+with col1:
+    st.markdown('<p class="title">Gemma Text Generator</p>', unsafe_allow_html=True)
+with col2:
+    st.image("images/gsoc_logo.png", width=80, caption="GSoC 2025")
+
 
 # Instructions and example
 st.markdown("""
@@ -176,5 +235,9 @@ if submit_button or st.session_state.trigger_example:
 
 # Footer
 st.markdown("---")
-st.write("Built with ❤️ by Utkarsh Shukla for GSoC Proposal 2025 | Powered by (Gemma + Hugging Face) and Saiyan Pride")
-st.write("Wish me luck, 🤞")
+col1, col2 = st.columns([3, 1])
+with col1:
+    st.write("Built with ❤️ by Utkarsh Shukla for GSoC Proposal 2025 | Powered by (Gemma + Hugging Face) and Saiyan Pride")
+    st.write("Wish me luck, 🤞")
+with col2:
+    st.image("images/gemma_logo.png", width=80, caption="Gemma by DeepMind")