Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 from utils import generate_lesson
 import html
-import re
 
 # Beginner coding topics
 TOPICS = [
@@ -12,60 +11,14 @@ TOPICS = [
     "Building a Button in HTML/CSS", "Making a Webpage Layout",
 ]
 
-# CSS for polished glowing UI
 css_styles = """
 body {
-    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
+    background: #111;
     color: #fa29bc;
-    font-family: Consolas, monospace;
+    font-family: monospace;
     padding: 20px;
 }
 footer { display:none; }
-
-.card {
-    background: #1a1a1a;
-    padding: 25px;
-    border-radius: 16px;
-    margin-bottom: 25px;
-    box-shadow: 0 0 30px rgba(250, 41, 188, 0.5);
-    transition: transform 0.2s, box-shadow 0.2s;
-    position: relative;
-    overflow: hidden;
-}
-.card::before {
-    content: "";
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle at center, rgba(250,41,188,0.2), transparent 70%);
-    animation: glow 5s linear infinite;
-}
-@keyframes glow {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 0 60px rgba(250, 41, 188, 0.8);
-}
-.card pre {
-    background: #222;
-    padding: 15px;
-    border-radius: 12px;
-    overflow-x: auto;
-    font-family: Consolas, monospace;
-    color: #fa29bc;
-    white-space: pre-wrap;
-}
-.exercise {
-    background: #111;
-    border-left: 5px solid #fa29bc;
-    padding: 12px;
-    margin-top: 15px;
-    border-radius: 8px;
-}
 button {
     background:#fa29bc;
     color:white;
@@ -76,50 +29,36 @@ button {
 }
 """
 
-def highlight_code_blocks(text):
-    """
-    Finds triple-backtick code blocks and wraps them in <pre> tags for proper display.
-    Escapes HTML to prevent rendering issues.
-    """
-    def repl(match):
-        lang = match.group(1) or ""
-        code = match.group(2)
-        escaped_code = html.escape(code)
-        return f"<pre class='{lang}'>{escaped_code}</pre>"
-
-    # Replace ```lang ... ``` with <pre> blocks
-    return re.sub(r"```(\w*)\n(.*?)```", repl, text, flags=re.DOTALL)
-
 with gr.Blocks(title="Beginner Coding Lessons", css=css_styles) as demo:
 
     with gr.Column():
         topic_dropdown = gr.Dropdown(choices=TOPICS, label="Choose Topic", value=TOPICS[0])
         generate_btn = gr.Button("Generate Lesson")
+        
+        # Standard Markdown output for lessons
         lesson_output = gr.Markdown()
+        
+        # Status message for "please wait"
+        status_label = gr.Label(value="")  
 
     def generate(topic):
+        # Show "please wait" message
+        status_label.value = "✨ Your lesson is being generated... please wait!"
+        
+        # Generate the lesson
         file_path, lesson_text = generate_lesson(topic)
-
-        # Escape HTML outside of code blocks
-        # First, highlight code blocks properly
-        lesson_text = highlight_code_blocks(lesson_text)
-
-        # Escape remaining HTML
+        
+        # Escape HTML to avoid rendering issues
         lesson_text = html.escape(lesson_text)
-        # Allow <pre> tags to render
-        lesson_text = lesson_text.replace("&lt;pre&gt;", "<pre>").replace("&lt;/pre&gt;", "</pre>")
-
-        # Style practice exercises
-        lesson_text = lesson_text.replace(
-            "Practice:", "<div class='exercise'><strong>Practice:</strong>"
-        ).replace("\n", "<br>") + "</div>"
+        # Preserve line breaks in Markdown
+        lesson_text = lesson_text.replace("\\n", "\n")
+        
+        # Clear the status message
+        status_label.value = ""
+        
+        return lesson_text, status_label.value
 
-        # Wrap in glowing card
-        card_text = f"<div class='card'>{lesson_text}</div>"
-        return card_text
-
-    generate_btn.click(fn=generate, inputs=topic_dropdown, outputs=lesson_output)
+    generate_btn.click(fn=generate, inputs=topic_dropdown, outputs=[lesson_output, status_label])
 
 if __name__ == "__main__":
     demo.launch()
-