Update app.py

app.py

@@ -32,7 +32,7 @@ def explain_text(selected_text, current_html):
                 },
                 {
                     "role": "user",
-                    "content": f"Explain this text from a learning resource in 2-3 clear, simple sentences for a beginner:\n\n\"{selected_text}\""
+                    "content": f"Explain this text in 2-3 clear, simple sentences:\n\n\"{selected_text}\""
                 }
             ],
             max_tokens=300,
@@ -45,27 +45,26 @@ def explain_text(selected_text, current_html):
         return current_html, f"❌ Error: {str(e)}"
 
     replacement = (
-        f'<mark class="explained-original" title="Original text">{selected_text}</mark>'
+        f'<mark class="explained-original">{selected_text}</mark>'
         f'<span class="explanation-block">💡 {explanation}</span>'
     )
 
     new_html = current_html.replace(selected_text, replacement, 1)
 
     if new_html == current_html:
-        return current_html, "⚠️ Could not find selected text in the document. Try selecting again."
+        return current_html, "⚠️ Could not find selected text in the document."
 
-    return new_html, f"✅ Explained: \"{selected_text[:60]}{'...' if len(selected_text) > 60 else ''}\""
+    return new_html, "✅ Explanation added."
 
 
 def reset_content():
-    return INITIAL_HTML, "", "Document reset."
+    return f'<div id="reader-content">{INITIAL_HTML}</div>', "", "Document reset."
 
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,300&display=swap');
 body { background: #faf8f4 !important; }
 #reader-content {
-    font-family: 'Source Serif 4', Georgia, serif;
+    font-family: Georgia, serif;
     font-size: 1.05rem;
     line-height: 1.85;
     color: #2c2010;
@@ -77,25 +76,16 @@ body { background: #faf8f4 !important; }
 }
 .content-para { margin-bottom: 1.4em; }
 mark.explained-original {
-    background: linear-gradient(120deg, #f5e6a3, #f0d870);
-    border-radius: 3px;
-    padding: 1px 3px;
+    background: #f5e6a3;
     text-decoration: line-through;
-    text-decoration-color: #c8a800;
-    color: #6b5a10;
-    font-style: italic;
-    opacity: 0.75;
+    opacity: 0.7;
 }
 .explanation-block {
     display: inline-block;
     background: #fffbee;
     border-left: 3px solid #d4a800;
-    border-radius: 0 6px 6px 0;
     padding: 6px 12px;
     margin: 4px 2px;
-    color: #3a2e08;
-    font-size: 0.93rem;
-    line-height: 1.6;
 }
 """
 
@@ -118,60 +108,57 @@ function setupSelectionCapture() {
 setupSelectionCapture();
 """
 
-with gr.Blocks(css=CSS, js=JS_CAPTURE_SELECTION, title="ML Reader — Highlight & Explain") as demo:
+with gr.Blocks(title="ML Reader — Highlight & Explain") as demo:
 
     gr.HTML("""
-    <div style="max-width: 720px; margin: 0 auto; padding: 32px 16px 0;">
-        <h1 style="font-family:'Playfair Display',Georgia,serif; font-size:2.1rem; color:#1a1208; margin-bottom:4px;">
-            Text Generation
-        </h1>
-        <p style="font-family:'Source Serif 4',Georgia,serif; font-size:0.82rem; color:#a09070; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 12px;">
-            Machine Learning · Reading Guide
+    <div style="max-width:720px; margin:0 auto; padding:32px 16px 0;">
+        <h1>Text Generation</h1>
+        <p style="color:#888; font-size:0.9rem;">
+            Highlight text below and click Explain.
         </p>
     </div>
     """)
 
-    with gr.Column(elem_style="max-width:720px; margin:0 auto; padding:0 16px 60px;"):
+    # Wrap content in a styled HTML container instead of elem_style
+    gr.HTML('<div style="max-width:720px; margin:0 auto; padding:0 16px 60px;">')
 
-        content_html = gr.HTML(
-            value=f'<div id="reader-content">{INITIAL_HTML}</div>',
-            label="",
-        )
+    content_html = gr.HTML(
+        value=f'<div id="reader-content">{INITIAL_HTML}</div>'
+    )
 
-        selected_text = gr.Textbox(
-            label="Selected text",
-            placeholder="Highlight text above — it will appear here automatically…",
-            lines=2,
-            elem_classes=["selected-box"],
-            show_label=True,
-        )
+    selected_text = gr.Textbox(
+        label="Selected text",
+        lines=2,
+        elem_classes=["selected-box"],
+    )
 
-        with gr.Row():
-            explain_btn = gr.Button("✦ Explain Selection", variant="primary")
-            reset_btn = gr.Button("↺ Reset")
+    with gr.Row():
+        explain_btn = gr.Button("✦ Explain Selection")
+        reset_btn = gr.Button("↺ Reset")
 
-        status = gr.Textbox(label="", interactive=False, show_label=False)
+    status = gr.Textbox(label="", interactive=False)
 
-        html_state = gr.State(f'<div id="reader-content">{INITIAL_HTML}</div>')
+    html_state = gr.State(f'<div id="reader-content">{INITIAL_HTML}</div>')
 
-        explain_btn.click(
-            fn=explain_text,
-            inputs=[selected_text, html_state],
-            outputs=[html_state, status],
-        ).then(
-            fn=lambda h: h,
-            inputs=[html_state],
-            outputs=[content_html],
-        )
+    explain_btn.click(
+        fn=explain_text,
+        inputs=[selected_text, html_state],
+        outputs=[html_state, status],
+    ).then(
+        lambda h: h,
+        inputs=[html_state],
+        outputs=[content_html],
+    )
 
-        reset_btn.click(
-            fn=reset_content,
-            inputs=[],
-            outputs=[html_state, selected_text, status],
-        ).then(
-            fn=lambda h: f'<div id="reader-content">{INITIAL_HTML}</div>',
-            inputs=[html_state],
-            outputs=[content_html],
-        )
+    reset_btn.click(
+        fn=reset_content,
+        outputs=[html_state, selected_text, status],
+    ).then(
+        lambda h: h,
+        inputs=[html_state],
+        outputs=[content_html],
+    )
+
+    gr.HTML('</div>')
 
-demo.launch()
+demo.launch(css=CSS, js=JS_CAPTURE_SELECTION)