Update app.py

app.py

@@ -3,7 +3,7 @@ import random
 import gradio as gr
 import base64
 
-# Load JSON
+# Load JSON dataset
 with open("gita_techies_18_chapters.json", "r", encoding="utf-8") as f:
     gita_for_techies = json.load(f)
 
@@ -11,7 +11,7 @@ with open("gita_techies_18_chapters.json", "r", encoding="utf-8") as f:
 with open("bg.png", "rb") as img_file:
     b64_bg_img = base64.b64encode(img_file.read()).decode()
 
-# Function to display one entry
+# Function to return one random entry
 def get_gita_tech():
     entry = random.choice(gita_for_techies)
     return f"""
@@ -34,37 +34,39 @@ def get_gita_tech():
       <pre><code>{entry["code_snippet"]}</code></pre>
 
       <hr style="margin-top: 30px;">
-      <p style="text-align:center;font-size:3.5vw;">🌸 Made with 💜 by <b>Sreelekha Putta</b></p>
+      <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.92);
-        padding: 5vw;
-        border-radius: 5vw;
-        width: 92vw;
+        padding: 20px;
+        border-radius: 16px;
         max-width: 800px;
-        margin: 0 auto 6vw auto;
-        box-shadow: 0 0 20px #ab71f7;
+        width: 92%;
+        margin: 0 auto 30px auto;
+        box-shadow: 0 0 25px #ab71f7;
         color: #ffffff !important;
         font-family: 'Segoe UI', sans-serif;
-        text-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
+        font-size: 1rem;
+        line-height: 1.8;
         word-wrap: break-word;
         overflow-wrap: break-word;
-        font-size: 4vw;
-        line-height: 1.7;
+        text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }}
-      .content h2 {{
-        font-size: 5.5vw;
-        margin-bottom: 4vw;
+      h2 {{
+        font-size: 1.5rem;
+        margin-bottom: 16px;
         color: #d9b2ff;
       }}
       pre {{
         background: #0e0e23;
         color: #e0f2fe;
-        padding: 3vw;
-        border-radius: 3vw;
-        font-size: 3.5vw;
+        padding: 12px;
+        border-radius: 8px;
+        font-size: 0.95rem;
         overflow-x: auto;
         box-shadow: 0 0 10px rgba(255,255,255,0.1);
         text-shadow: none;
@@ -72,7 +74,7 @@ def get_gita_tech():
     </style>
     """
 
-# CSS block
+# CSS with background
 css = f"""
 body {{
     margin: 0;
@@ -97,9 +99,9 @@ body::before {{
 h1 {{
     text-align: center;
     color: #e7c1ff;
-    font-size: 6vw;
+    font-size: 2.8rem;
     font-weight: 700;
-    margin: 6vw 4vw 4vw 4vw;
+    margin: 30px 0 20px 0;
     text-shadow: 0 0 15px #c084fc;
 }}
 
@@ -108,11 +110,11 @@ button {{
     border-radius: 12px;
     color: white;
     font-weight: 600;
-    font-size: 4.5vw;
-    padding: 3vw 7vw;
+    font-size: 1.3rem;
+    padding: 0.8rem 2.4rem;
     border: none;
     cursor: pointer;
-    margin-bottom: 6vw;
+    margin-bottom: 30px;
     box-shadow: 0 0 18px #a78bfa88;
 }}
 
@@ -123,7 +125,7 @@ button:hover {{
 }}
 """
 
-# Gradio app
+# Gradio interface
 with gr.Blocks(css=css) as app:
     gr.Markdown("<h1>💻 Bhagavad Gita for Techies 💻</h1>")
     output = gr.HTML()