Update app.py

app.py

@@ -3,23 +3,69 @@ from model import SpellChecker
 
 checker = SpellChecker()
 
+# Load your HTML template
+with open("index.html", "r") as f:
+    html_template = f.read()
+
 def check_text(text):
     corrected_spelling = checker.correct_spelling(text)
-    corrected_grammar, _ = checker.correct_grammar(text)
-    
-    return f"""
-    ## ✅ Corrected Text:
-    {corrected_grammar}
+    corrected_grammar, grammar_issues = checker.correct_grammar(text)
     
-    Note: For full grammar checking, run locally with Java installed.
+    # Format the output to match your HTML structure
+    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>
     """
+    
+    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
 
-iface = gr.Interface(
-    fn=check_text,
-    inputs=gr.Textbox(label="Enter text", lines=10),
-    outputs=gr.Markdown(),
-    title="Spell Checker",
-    examples=[["Helo world!"]]
-)
+# Create custom Gradio interface
+with gr.Blocks() as demo:
+    # Inject your entire HTML
+    gr.HTML(html_template)
+    
+    # Add interactive components
+    text_input = gr.Textbox(visible=False, label="text")
+    output_area = gr.HTML()
+    
+    # JavaScript to handle form submission
+    demo.load(
+        None,
+        None,
+        None,
+        _js="""
+        () => {
+            document.querySelector('form').onsubmit = async (e) => {
+                e.preventDefault();
+                const text = document.querySelector('textarea').value;
+                const result = await gradioApp.querySelector('#component-1 input').value = text;
+                gradioApp.querySelector('#component-2 button').click();
+            }
+        }
+        """
+    )
+    
+    # Connect function to components
+    text_input.change(
+        check_text,
+        inputs=text_input,
+        outputs=output_area
+    )
 
-iface.launch()
+demo.launch()