Update app.py

app.py

@@ -4,68 +4,80 @@ import os
 
 checker = SpellChecker()
 
-# Load your HTML template
-with open("index.html", "r") as f:
-    html_template = f.read()
+# Your CSS styles (copied from index.html)
+css = """
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { 
+    font-family: 'Poppins', sans-serif; 
+    background: linear-gradient(to right, #6a11cb, #2575fc); 
+    color: #fff; 
+    min-height: 100vh; 
+    padding: 40px; 
+}
+h1 { 
+    text-align: center; 
+    font-weight: 700; 
+    margin-bottom: 40px; 
+    font-size: 2.5rem; 
+}
+.output { 
+    background-color: rgba(255, 255, 255, 0.15); 
+    backdrop-filter: blur(12px); 
+    padding: 25px; 
+    border-radius: 20px; 
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); 
+    margin-top: 20px;
+}
+.issues li { color: #ff9f9f; }
+textarea {
+    width: 100%;
+    height: 150px;
+    padding: 15px;
+    border-radius: 10px;
+    border: none;
+    font-size: 16px;
+    resize: none;
+}
+"""
 
 def check_text(text):
     corrected_spelling = checker.correct_spelling(text)
     corrected_grammar, grammar_issues = checker.correct_grammar(text)
     
-    output = f"""
-    <div class="output">
-        <h3>✅ Corrected Spelling:</h3>
-        <p>{corrected_spelling}</p>
-    </div>
-    <div class="output">
-        <h3>📝 Grammar Suggestions:</h3>
-        <p>{corrected_grammar}</p>
-    </div>
-    """
+    issues_html = "".join(f"<li>{issue}</li>" for issue in grammar_issues) if grammar_issues else "<li>No issues found</li>"
     
-    if grammar_issues:
-        output += f"""
-        <div class="output issues">
-            <h4>🚨 Issues Found:</h4>
-            <ul>
-                {"".join(f"<li>{issue}</li>" for issue in grammar_issues)}
-            </ul>
-        </div>
-        """
-    
-    return output
+    return (
+        corrected_spelling,
+        corrected_grammar,
+        f"<ul class='issues'>{issues_html}</ul>"
+    )
 
-with gr.Blocks() as demo:
-    gr.HTML(html_template)
+with gr.Blocks(css=css, title="Spell & Grammar Checker") as demo:
+    gr.Markdown("""
+    <h1>Spell & Grammar Checker</h1>
+    """)
     
-    text_input = gr.Textbox(visible=False, label="text")
-    output_area = gr.HTML()
+    with gr.Row():
+        text_input = gr.Textbox(
+            label="Type your text here",
+            placeholder="Type or paste your text here...",
+            lines=10
+        )
     
-    demo.load(
-        None,
-        None,
-        None,
-        _js="""
-        () => {
-            document.querySelector('form').onsubmit = async (e) => {
-                e.preventDefault();
-                const text = document.querySelector('textarea').value;
-                gradioApp.querySelector('#component-1 input').value = text;
-                gradioApp.querySelector('#component-2 button').click();
-            }
-        }
-        """
-    )
+    submit_btn = gr.Button("✨ Check Now", variant="primary")
+    
+    with gr.Column():
+        spelling_out = gr.Textbox(label="✅ Corrected Spelling")
+        grammar_out = gr.Textbox(label="📝 Grammar Suggestions")
+        issues_out = gr.HTML(label="🚨 Issues Found")
     
-    text_input.change(
+    submit_btn.click(
         check_text,
         inputs=text_input,
-        outputs=output_area
+        outputs=[spelling_out, grammar_out, issues_out]
     )
 
-# Modified launch configuration for Hugging Face
 demo.launch(
-    server_port=int(os.environ.get("PORT", 7860)),  # Use Hugging Face's port
-    server_name="0.0.0.0",  # Required for Hugging Face
-    share=False  # Disable public sharing
+    server_port=int(os.environ.get("PORT", 7860)),
+    server_name="0.0.0.0"
 )