Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
-from anthropic import Anthropic
+from openai import OpenAI
 
-client = Anthropic()
+client = OpenAI()
 
 CONTENT_PARAGRAPHS = [
     "Text generation is the task of producing natural language text given an input prompt. It is commonly used for chatbots, creative writing, summarization, and code generation.",
@@ -23,22 +23,27 @@ def explain_text(selected_text, current_html):
     selected_text = selected_text.strip()
 
     try:
-        response = client.messages.create(
-            model="claude-opus-4-5",
-            max_tokens=300,
+        response = client.chat.completions.create(
+            model="gpt-4o-mini",
             messages=[
+                {
+                    "role": "system",
+                    "content": "You are an ML instructor who explains concepts clearly and simply for beginners."
+                },
                 {
                     "role": "user",
-                    "content": f"You are an ML instructor. 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 from a learning resource in 2-3 clear, simple sentences for a beginner:\n\n\"{selected_text}\""
                 }
             ],
+            max_tokens=300,
+            temperature=0.7,
         )
-        explanation = response.content[0].text.strip()
+
+        explanation = response.choices[0].message.content.strip()
+
     except Exception as e:
         return current_html, f"❌ Error: {str(e)}"
 
-    # Replace the selected text in the HTML with explanation block
-    escaped = selected_text.replace('"', '"')
     replacement = (
         f'<mark class="explained-original" title="Original text">{selected_text}</mark>'
         f'<span class="explanation-block">💡 {explanation}</span>'
@@ -58,9 +63,7 @@ def reset_content():
 
 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-size: 1.05rem;
@@ -72,18 +75,7 @@ body { background: #faf8f4 !important; }
     border: 1px solid #e8dfc8;
     min-height: 320px;
 }
-
-#reader-content h1 {
-    font-family: 'Playfair Display', Georgia, serif;
-    font-size: 2rem;
-    color: #1a1208;
-    margin-bottom: 4px;
-}
-
-.content-para {
-    margin-bottom: 1.4em;
-}
-
+.content-para { margin-bottom: 1.4em; }
 mark.explained-original {
     background: linear-gradient(120deg, #f5e6a3, #f0d870);
     border-radius: 3px;
@@ -94,7 +86,6 @@ mark.explained-original {
     font-style: italic;
     opacity: 0.75;
 }
-
 .explanation-block {
     display: inline-block;
     background: #fffbee;
@@ -105,50 +96,6 @@ mark.explained-original {
     color: #3a2e08;
     font-size: 0.93rem;
     line-height: 1.6;
-    box-shadow: 0 2px 8px rgba(180,140,0,0.1);
-}
-
-#hint-text {
-    font-family: 'Source Serif 4', Georgia, serif;
-    color: #a09070;
-    font-size: 0.88rem;
-    margin-bottom: 8px;
-}
-
-.selected-box textarea {
-    font-family: 'Source Serif 4', Georgia, serif !important;
-    font-size: 0.95rem !important;
-    color: #3a2e08 !important;
-    background: #fffbee !important;
-    border: 1px solid #d4c88a !important;
-    border-radius: 8px !important;
-}
-
-.explain-btn {
-    background: #1a1208 !important;
-    color: #f5e8c0 !important;
-    border-radius: 8px !important;
-    font-family: 'Source Serif 4', Georgia, serif !important;
-    font-size: 0.95rem !important;
-    border: none !important;
-}
-.explain-btn:hover {
-    background: #2e2010 !important;
-}
-
-.reset-btn {
-    background: transparent !important;
-    color: #a09070 !important;
-    border: 1px solid #d4c88a !important;
-    border-radius: 8px !important;
-    font-family: 'Source Serif 4', Georgia, serif !important;
-    font-size: 0.9rem !important;
-}
-
-.status-text {
-    font-family: 'Source Serif 4', Georgia, serif !important;
-    color: #6b5a10 !important;
-    font-size: 0.85rem !important;
 }
 """
 
@@ -181,9 +128,6 @@ with gr.Blocks(css=CSS, js=JS_CAPTURE_SELECTION, title="ML Reader — Highlight
         <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
         </p>
-        <p id="hint-text" style="font-family:'Source Serif 4',Georgia,serif; color:#a09070; font-size:0.88rem; margin-bottom:20px;">
-            ✦ Highlight any text below, then click <em>Explain Selection</em> to replace it with an AI explanation.
-        </p>
     </div>
     """)
 
@@ -203,12 +147,11 @@ with gr.Blocks(css=CSS, js=JS_CAPTURE_SELECTION, title="ML Reader — Highlight
         )
 
         with gr.Row():
-            explain_btn = gr.Button("✦ Explain Selection", elem_classes=["explain-btn"], variant="primary")
-            reset_btn = gr.Button("↺ Reset", elem_classes=["reset-btn"])
+            explain_btn = gr.Button("✦ Explain Selection", variant="primary")
+            reset_btn = gr.Button("↺ Reset")
 
-        status = gr.Textbox(label="", interactive=False, show_label=False, elem_classes=["status-text"])
+        status = gr.Textbox(label="", interactive=False, show_label=False)
 
-        # Hidden state to track current HTML
         html_state = gr.State(f'<div id="reader-content">{INITIAL_HTML}</div>')
 
         explain_btn.click(