Update app.py

app.py

@@ -1,52 +1,39 @@
-# Step 1: Install Gradio
-
-# Step 2: Upload JSON and bg.png files
-from google.colab import files
-uploaded = files.upload()  # Upload: gita_techies_18_chapters.json + bg.png
-
 import json
 import random
 import gradio as gr
 import base64
 
-# Step 3: Load JSON data
+# ✅ Load JSON data
 with open("gita_techies_18_chapters.json", "r", encoding="utf-8") as f:
     gita_for_techies = json.load(f)
 
-# Step 4: Encode background image as Base64
+# ✅ Encode bg.png as base64
 with open("bg.png", "rb") as img_file:
     b64_bg_img = base64.b64encode(img_file.read()).decode()
 
-# Step 5: Define function to get random Gita entry formatted as HTML
+# ✅ Wisdom generator
 def get_gita_tech():
     entry = random.choice(gita_for_techies)
     return f"""
     <div class="content">
       <h2>📘 Chapter {entry["chapter_number"]}</h2>
-
       <p><b>🌼 Spiritual Meaning (EN):</b><br>{entry["spiritual_meaning_en"]}</p>
       <p><b>🪔 ఆధ్యాత్మిక అర్థం (TE):</b><br>{entry["spiritual_meaning_te"]}</p>
-
       <p><b>💻 Tech Meaning (EN):</b><br>{entry["tech_meaning_en"]}</p>
       <p><b>🌾 టెక్ అర్థం (TE):</b><br>{entry["tech_meaning_te"]}</p>
-
       <p><b>🧠 Lesson for Techies:</b><br>{entry["lesson_for_techies"]}</p>
       <p><b>⚙️ Tech Stack Analogy:</b><br>{entry["tech_stack_analogy"]}</p>
-
       <p><b>🧘 Daily Reminder (EN):</b><br><i>{entry["daily_reminder_en"]}</i></p>
       <p><b>🧘 రోజువారీ స్మరణ (TE):</b><br><i>{entry["daily_reminder_te"]}</i></p>
-
       <p><b>🧾 Code Snippet:</b></p>
       <pre><code>{entry["code_snippet"]}</code></pre>
-
       <hr style="margin-top: 30px;">
       <p style="text-align:center;font-size:0.9rem;">🪷 Made with 💜 by <b>Sreelekha Putta</b></p>
     </div>
-
     <style>
       .content {{
         background: rgba(20, 15, 35, 0.9);
-        padding: 25px 20px;
+        padding: 25px;
         border-radius: 16px;
         max-width: 800px;
         margin: 0 auto 30px auto;
@@ -55,11 +42,6 @@ def get_gita_tech():
         font-family: 'Segoe UI', sans-serif;
         animation: fadeIn 1.5s ease forwards;
       }}
-      h2 {{
-        color: #d0a8ff;
-        font-family: Georgia, serif;
-        margin-bottom: 16px;
-      }}
       pre {{
         background: #1f2937;
         color: #a5f3fc;
@@ -68,14 +50,17 @@ def get_gita_tech():
         font-size: 0.95rem;
         overflow-x: auto;
       }}
+      h2 {{
+        color: #d0a8ff;
+      }}
       @keyframes fadeIn {{
-        from {{opacity: 0; transform: translateY(20px);}}
-        to {{opacity: 1; transform: translateY(0);}}
+        from {{ opacity: 0; transform: translateY(20px); }}
+        to {{ opacity: 1; transform: translateY(0); }}
       }}
     </style>
     """
 
-# Step 6: Define CSS with Base64 background image
+# ✅ CSS with background image
 css = f"""
 body {{
     margin: 0;
@@ -86,10 +71,6 @@ body {{
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
     font-family: 'Segoe UI', sans-serif;
 }}
 body::before {{
@@ -102,10 +83,9 @@ body::before {{
 h1 {{
     text-align: center;
     color: #e7c1ff;
-    margin: 30px 0 20px 0;
-    font-family: Georgia, serif;
+    font-size: 2.5rem;
     font-weight: 700;
-    font-size: 2.8rem;
+    margin-bottom: 20px;
     text-shadow: 0 0 15px #c084fc;
 }}
 button {{
@@ -117,9 +97,8 @@ button {{
     padding: 0.8rem 2.4rem;
     border: none;
     cursor: pointer;
-    box-shadow: 0 0 18px #a78bfa88;
-    transition: 0.3s ease;
     margin-bottom: 30px;
+    box-shadow: 0 0 18px #a78bfa88;
 }}
 button:hover {{
     background-color: #d8b4fe;
@@ -128,7 +107,7 @@ button:hover {{
 }}
 """
 
-# Step 7: Create Gradio app interface
+# ✅ Build UI
 with gr.Blocks(css=css) as app:
     gr.Markdown("<h1>💻 Bhagavad Gita for Techies 💻</h1>")
     output = gr.HTML()