Final design is complete for now, hope you guys like it

app.py

@@ -1,10 +1,12 @@
 # Hey its your saiyan Utkarsh Shukla. I gonna write my custom comments after each line of code. So even a beginner (previous me) can read and get whats going on.
 # Bear with me, I got your Back buddy
+# And hey don't be overwhelmed by lines of code as most part is just covering design.
 
 
 import streamlit as st  
 # The saviour web app creator, easy peasy web app creation by few lines of codes. 
 # No HTML, CSS, or JS needed!
+# But I have used a bit to design but avoid it as its not necessary
 
 
 from transformers import AutoTokenizer, AutoModelForCausalLM
@@ -25,6 +27,7 @@ from wordcloud import WordCloud
 # Mostly it avoids our stop words like it, is, are etc
 # More frequency = more importance → bigger word in the cloud.
 
+
 import matplotlib.pyplot as plt
 # This guy helps us to plot. So wait till you see it.
 # We’ll use it to show our Word Cloud in style.
@@ -46,7 +49,7 @@ 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)
     # 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
+    # Downloads and loads the tokenizer config and vocab for the given model
     model = AutoModelForCausalLM.from_pretrained(model_name)
     # As we discussed, this class is designed for loading pre-trained language models for causal (next-token prediction) tasks.
     # Loads the actual model used for causal (next-word) prediction tasks
@@ -57,10 +60,11 @@ def load_model_and_tokenizer():
 def generate_text(prompt, tone, max_length, temperature=0.7, top_p=0.9, repetition_penalty=1.0):
     tokenizer, model = load_model_and_tokenizer()
     # Adjust prompt based on tone
+    # And Bro believe me, Impact: Better prompts = better outputs = a stronger GSoC impression!
     tone_prompts = {
-        "Funny": f"Generate a funny response to: {prompt}",
-        "Serious": f"Provide a serious and thoughtful response to: {prompt}",
-        "Poetic": f"Write a poetic response to: {prompt}"
+        "Funny": f"Generate a concise, humorous response to: {prompt}. Use witty wordplay, unexpected twists, or lighthearted exaggeration, avoiding offensive content. Aim for a punchline-style finish, e.g., if the prompt is 'The dog barked,' respond like 'The dog barked so loud, it woke the moon—and now it is howling back!'",
+        "Serious": f"Provide a detailed, thoughtful, and professional response to: {prompt}. Offer logical reasoning, depth, and a formal tone, as if explaining to an expert audience. For example, if the prompt is 'The future of AI,' discuss ethical implications and technical challenges in 2-3 sentences.",
+        "Poetic": f"Write a vivid, poetic response to: {prompt}. Use metaphor, rhythm, and imagery to create a lyrical flow, as if crafting a short verse. For instance, if the prompt is 'The river flows,' respond with 'The river flows, a silver thread, / Through emerald dreams where silence tread.'"
     }
     input_text = tone_prompts.get(tone, prompt)
     
@@ -76,168 +80,369 @@ def generate_text(prompt, tone, max_length, temperature=0.7, top_p=0.9, repetiti
     )
     return tokenizer.decode(outputs[0], skip_special_tokens=True)
 
-# Updated CSS for a modern, awesome look
+# Clean and Solid UI for our Project, keeping the blue theme of gemini.
+# We will continue tutorial after this st.markdown()
 st.markdown("""
     <style>
-    /* Background image with fallback */
+    /* Solid background with minimal decoration */
     .stApp {
-        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://drive.google.com/file/d/1tgf1WmRbJB09dY_KmnoCOjxL0YcQNW8m/view?usp=drive_link');
-        background-size: cover;
-        background-position: center;
-        color: #ffffff;  /* White text for contrast */
+        background-color: #1E1E3A;
+        color: #f0f0f0;
     }
-    /* 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;
+    
+    /* Clean container styling for all elements */
+    .stForm, div.stButton, .stMarkdown, div.stSlider {
+        border-radius: 8px;
+        transition: all 0.2s ease;
     }
-    .title:hover {
-        transform: scale(1.05);
+    
+    /* Professional title styling */
+    .title {
+        color: #ffffff;
+        font-size: 32px;
+        font-weight: 700;
+        padding: 15px 0;
+        font-family: 'Segoe UI', Arial, sans-serif;
+        letter-spacing: 0.5px;
+        margin-bottom: 15px;
+        border-bottom: 2px solid #4A5BEA;
+        display: inline-block;
     }
-    /* Card-like instructions */
+    
+    /* Clean instructions card */
     .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;
+        background: rgba(255, 255, 255, 0.05);
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        font-size: 16px;
+        color: #f0f0f0;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        margin-bottom: 20px;
+        line-height: 1.5;
     }
-    /* Neon glow output box */
+    
+    /* Professional 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;
+        background: rgba(20, 20, 40, 0.8);
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
         font-family: 'Courier New', monospace;
         font-size: 16px;
         color: #ffffff;
         white-space: pre-wrap;
-        animation: glow 1.5s infinite alternate;
+        border: 1px solid #4A5BEA;
+        margin-top: 1.5rem;
     }
-    @keyframes glow {
-        from { box-shadow: 0 0 10px #00d2ff; }
-        to { box-shadow: 0 0 20px #3a7bd5; }
+    
+    /* Form styling */
+    .stTextInput>div>div>input {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: white;
+        border-radius: 6px;
+        padding: 10px;
+        font-size: 16px;
     }
-    /* Button hover effect */
+    .stTextInput>div>div>input:focus {
+        border-color: #4A5BEA;
+        box-shadow: 0 0 5px rgba(74, 91, 234, 0.5);
+    }
+    
+    /* Clean, professional buttons */
     .stButton>button {
-        background: #3a7bd5;
+        background-color: #4A5BEA;
         color: white;
-        border-radius: 8px;
-        transition: all 0.3s;
+        border: none;
+        border-radius: 6px;
+        padding: 10px 15px;
+        font-size: 16px;
+        font-weight: 500;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        transition: all 0.2s;
+        text-transform: none;
+        letter-spacing: 0.5px;
     }
     .stButton>button:hover {
-        background: #00d2ff;
+        background-color: #3A4AC0;
         transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    }
+    
+    /* Example button styling */
+    .example-button {
+        background-color: #2D3250;
+        color: white;
+        border: 1px solid #4A5BEA;
+        border-radius: 6px;
+        padding: 8px 16px;
+        margin: 5px;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-size: 14px;
+        font-weight: 500;
+    }
+    .example-button:hover {
+        background-color: #4A5BEA;
     }
-    /* Slider styling */
+    
+    /* Enhanced sliders */
     .stSlider>div>div>div {
-        background: #00d2ff !important;
+        background: #4A5BEA !important;
+    }
+    
+    /* Improved slider number values styling */
+    .stSlider p {
+        color: #f0f0f0 !important;
+    }
+    
+    /* Fix for the blue box numbers on sliders */
+    .stSlider > div > div > div > div > div > div {
+        background-color: #4A5BEA !important;
+        color: white !important;
+        font-weight: 500 !important;
+        border: none !important;
+        border-radius: 4px !important;
+        padding: 2px 6px !important;
+        font-size: 14px !important;
+    }
+    
+    /* Number value containers at the ends of sliders */
+    .stSlider > div > div > div:first-child,
+    .stSlider > div > div > div:last-child {
+        background-color: #292952 !important;
+        color: #f0f0f0 !important;
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+        border-radius: 4px !important;
+        padding: 4px 8px !important;
+        font-size: 14px !important;
+        font-family: monospace !important;
+    }
+    
+    /* Custom selectbox styling */
+    .stSelectbox>div>div {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 6px;
+    }
+    
+    /* Expander styling */
+    .streamlit-expanderHeader {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #f0f0f0 !important;
+        font-weight: 500;
+    }
+    
+    /* WordCloud container */
+    .wordcloud-container {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+        padding: 15px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        margin-top: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    /* Footer styling */
+    .footer {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 8px;
+        padding: 15px;
+        margin-top: 30px;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        text-align: center;
+    }
+    
+    /* Parameter card styling */
+    .parameter-card {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+        padding: 15px;
+        margin-bottom: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .parameter-card h4 {
+        color: #4A5BEA;
+        margin-top: 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+    
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: #4A5BEA;
+        border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: #3A4AC0;
     }
     </style>
 """, 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("https://huggingface.co/spaces/Kakaarot/Gemma-HuggingFace_QA_Demo/resolve/main/images/GSoC_logo.png", width=80, caption="GSoC 2025")
+# Its our Header with GSoC logo, keeping simple as deadline is coming. :)
+st.markdown("""
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px;">
+        <h1 class="title">Gemma Text Generator</h1>
+        <img src="https://huggingface.co/spaces/Kakaarot/Gemma-HuggingFace_QA_Demo/resolve/main/images/GSoC_logo.png" width="100" alt="GSoC 2025" style="margin-top: 5px;">
+    </div>
+""", unsafe_allow_html=True)
 
 
-# Instructions and example
+# This part is generally telling how things work
 st.markdown("""
-    <p class="instructions">
-    Enter a prompt below to generate text using the Gemma model from DeepMind. Customize the tone and length to see different outputs!<br>
-    <b>Example:</b> Prompt: "The cat sat on" | Tone: "Funny" | Length: 50 → "The cat sat on my homework and laughed as I cried over my grades."
-    </p>
+    <div class="instructions">
+        Enter a prompt below to generate text using the Gemma model from DeepMind. Customize the tone and length to see different outputs!<br><br>
+        <b>Example:</b> Prompt: "The cat sat on" | Tone: "Funny" | Length: 50 → "The cat sat on my homework and laughed as I cried over my grades."
+    </div>
 """, unsafe_allow_html=True)
 
 
-# Beginner friendly explanation block
-with st.expander("\U0001F9E0 How does this work? Click to peek inside."):
+# While this tells specifically step by step
+with st.expander("How does this work?"):
     st.markdown("""
-    - This app uses **Gemma-2B**, a language model from Google DeepMind.
-    - You give it a prompt, and it predicts the next words one-by-one (aka causal language modeling).
-    - The **tone** you choose adds flavor to the prompt before it hits the model.
-    - Parameters like **temperature** control how wild or safe the answers are.
-    - The output is visualized in a **Word Cloud** so you can see which words stand out!
-    """)
-
-# One-click examples
+    <div style="padding: 10px;">
+        <ul>
+            <li style="margin-bottom: 8px;">This app uses <b>Gemma-2B</b>, a language model from Google DeepMind.</li>
+            <li style="margin-bottom: 8px;">You give it a prompt, and it predicts the next words one-by-one (aka causal language modeling).</li>
+            <li style="margin-bottom: 8px;">The <b>tone</b> you choose adds flavor to the prompt before it hits the model.</li>
+            <li style="margin-bottom: 8px;">Parameters like <b>temperature</b> control how wild or safe the answers are.</li>
+            <li>The output is visualized in a <b>Word Cloud</b> so you can see which words stand out!</li>
+        </ul>
+    </div>
+    """, unsafe_allow_html=True)
+
+# Clean example buttons area
+st.markdown("<p style='margin-top: 20px; margin-bottom: 10px;'>Try these examples:</p>", unsafe_allow_html=True)
+# Below we defined one click example, where one click will fill the form generate button will be pressed automatically,
+# Fixed example buttons layout
+col1, col2, col3 = st.columns(3)
+
+# Hey! This is for giving user a taste of what would happen, so that he can try out the process on one click
 if "trigger_example" not in st.session_state:
     st.session_state.trigger_example = False
 
-col1, col2 = st.columns(2)
 with col1:
-    if st.button("Try Funny Cat Story"):
+    if st.button("✨ Funny Cat Story"):
         st.session_state.prompt = "The cat hacked my WiFi"
         st.session_state.tone = "Funny"
         st.session_state.trigger_example = True
 with col2:
-    if st.button("Try Poetic Goodbye"):
+    if st.button("🌅 Poetic Goodbye"):
         st.session_state.prompt = "As the sun set on our final day"
         st.session_state.tone = "Poetic"
         st.session_state.trigger_example = True
+with col3:
+    if st.button("🧠 Serious AI Future"):
+        st.session_state.prompt = "The future of AI is"
+        st.session_state.tone = "Serious"
+        st.session_state.trigger_example = True
 
-
-
-
-# User input section
+# Clean form with better spacing
 with st.form(key="input_form"):
+    st.markdown('<div style="margin-bottom: 15px;"><h3 style="color: #4A5BEA; margin-bottom: 10px;">Generate Your Text</h3></div>', unsafe_allow_html=True)
+    
     prompt = st.text_input("Enter a prompt", placeholder="e.g., 'The future of AI is'", value=st.session_state.get("prompt", ""))
-    tone = st.selectbox("Tone", ["Funny", "Serious", "Poetic"], index=["Funny", "Serious", "Poetic"].index(st.session_state.get("tone", "Funny")))
-    temperature = st.slider("Temperature (Creativity)", 0.2, 1.5, 0.7)
-    top_p = st.slider("Top-p (Nucleus Sampling)", 0.1, 1.0, 0.9)
-    repetition_penalty = st.slider("Repetition Penalty", 1.0, 2.0, 1.0)
-
-    max_length = st.slider("Word count", 20, 100, 50)
+    
+    col1, col2 = st.columns(2)
+    with col1:
+        tone = st.selectbox("Tone", ["Funny", "Serious", "Poetic"], index=["Funny", "Serious", "Poetic"].index(st.session_state.get("tone", "Funny")))
+    with col2:
+        max_length = st.slider("Word count", 20, 100, 50)
+    
+    st.markdown('<div class="parameter-card"><h4>Advanced Parameters</h4>', unsafe_allow_html=True)
+    
+    # Adding custom number formatting to make slider values look better
+    st.markdown("""
+    <style>
+    /* Custom number styling for slider values */
+    .value-display {
+        background-color: #292952;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-family: monospace;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        font-size: 14px;
+        display: inline-block;
+        margin-left: 5px;
+        color: #f0f0f0;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    col1, col2 = st.columns(2)
+    with col1:
+        temperature = st.slider("Temperature (Creativity)", 0.2, 1.5, 0.7, help="Higher values make output more random")
+    with col2:
+        top_p = st.slider("Top-p (Nucleus Sampling)", 0.1, 1.0, 0.9, help="Controls diversity")
+    
+    repetition_penalty = st.slider("Repetition Penalty", 1.0, 2.0, 1.0, help="Higher values discourage repetition")
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
     submit_button = st.form_submit_button(label="Generate")
 
 # Generate and display output
 if submit_button or st.session_state.trigger_example:
-    st.session_state.trigger_example = False  # Reset after use
+    st.session_state.trigger_example = False
     if not prompt:
         st.error("Please enter a prompt!")
     else:
         with st.spinner("Generating text..."):
             output = generate_text(prompt, tone, max_length, temperature, top_p, repetition_penalty)
-
+            
+            # Display metadata about the generation with improved value styling
             st.markdown(f"""
-                            <div style="
-                                background: linear-gradient(145deg, #ffffff33, #1f1f1f99);
-                                color: #f5f5f5;
-                                padding: 1rem;
-                                border-radius: 12px;
-                                box-shadow: 0 4px 15px rgba(0,0,0,0.25);
-                                font-family: 'Courier New', monospace;
-                                font-size: 1rem;
-                                white-space: pre-wrap;
-                                backdrop-filter: blur(6px);
-                                border: 1px solid rgba(255,255,255,0.1);
-                                margin-top: 1rem;
-                            ">
-                                {output}
-                            </div>
-                        """, unsafe_allow_html=True)
-
+            <div style="background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 12px; 
+                margin-bottom: 15px; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.1);">
+                <span style="color: #4A5BEA; font-weight: 500;">Tone:</span> 
+                <span class="value-display">{tone}</span> | 
+                <span style="color: #4A5BEA; font-weight: 500;">Temperature:</span> 
+                <span class="value-display">{temperature:.2f}</span> | 
+                <span style="color: #4A5BEA; font-weight: 500;">Words:</span> 
+                <span class="value-display">~{max_length}</span>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            st.markdown(f'<div class="output-box">{output}</div>', unsafe_allow_html=True)
+            
+            # WordCloud visualization
+            st.markdown('<div class="wordcloud-container">', unsafe_allow_html=True)
+            st.markdown('<h4 style="color: #4A5BEA; margin-top: 0;">Word Cloud Visualization</h4>', unsafe_allow_html=True)
             
-            # Generate and display word cloud
-            wordcloud = WordCloud(width=400, height=200, background_color="white").generate(output)
-            plt.figure(figsize=(8, 4))
+            # Generate a clean wordcloud
+            wordcloud = WordCloud(
+                width=600, 
+                height=300, 
+                background_color="#1E1E3A",
+                colormap="viridis",
+                max_words=100,
+                contour_width=0
+            ).generate(output)
+            
+            plt.figure(figsize=(10, 5))
             plt.imshow(wordcloud, interpolation="bilinear")
             plt.axis("off")
             st.pyplot(plt)
+            st.markdown('</div>', unsafe_allow_html=True)
 
-# Footer
-st.markdown("---")
-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("https://drive.google.com/file/d/1zytRddJu1AxCl7abp4INt6zm-U-6vUaw/view?usp=drive_link", width=80, caption="Gemma by DeepMind")
+# Clean footer
+st.markdown("""
+<div class="footer">
+    <p>Built with ❤️ by Utkarsh Shukla for GSoC Proposal 2025 | Powered by Gemma + Hugging Face</p>
+    <p style="margin-top: 10px;">
+        <img src="https://huggingface.co/spaces/Kakaarot/Gemma-HuggingFace_QA_Demo/resolve/main/images/google-gemini-icon.png" width="100" alt="Gemma by DeepMind">
+    </p>
+    <p style="margin-top: 10px;">Wish me luck! 🤞</p>         
+</div>
+""", unsafe_allow_html=True)