Update app.py

app.py

@@ -47,44 +47,14 @@ def generate_tutor_output(subject, difficulty, student_input, selected_model):
     except Exception as e:
         return f"Error: {str(e)}"
 
-# Inline CSS for styling the Gradio interface
+# Inline CSS to match the original styling
 custom_css = """
 body {
     font-family: 'Poppins', sans-serif;
-    background-color: #f4f4f9;
-    color: #333;
 }
-.container {
-    display: flex;
-    flex-direction: row;
-    height: 100vh;
-    overflow: hidden;
-}
-.text-section, .image-section {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-}
-.text-section {
-    background-color: #fff;
-    border-right: 1px solid #ddd;
-}
-.image-section {
-    background-color: #f9f9f9;
-}
-.fullframe {
-    width: 100%;
-    height: 60vh;
-    overflow: hidden;
-}
-.iframe-element {
-    width: 100%;
-    height: 100%;
-}
-h2 {
+h1 {
     font-size: 24px;
     margin-bottom: 20px;
-    color: #444;
 }
 label {
     font-weight: 600;
@@ -114,7 +84,7 @@ button {
 button:hover {
     background-color: #45a049;
 }
-.response-box {
+.markdown-output {
     margin-top: 20px;
     padding: 15px;
     background-color: #f1f1f1;
@@ -153,15 +123,15 @@ button:hover {
 
 # Gradio interface
 with gr.Blocks(
-    title="AI Tutor with Text and Image Generation",
-    css=custom_css  # Use inline CSS
+    title="AI Tutor with Text and Visuals",
+    css=custom_css
 ) as demo:
-    gr.Markdown("# 🎓 Your AI Tutor with Text and Image Generation")
+    gr.Markdown("# 🎓 Your AI Tutor with Visuals & Images")
 
-    with gr.Row(elem_classes="container"):
-        # Text Generation Section
-        with gr.Column(scale=2, elem_classes="text-section"):
-            gr.Markdown("## Text Generation with Groq API")
+    # Section for generating Text-based output
+    with gr.Row():
+        with gr.Column(scale=2):
+            # Input fields for subject, difficulty, model, and student input
             subject = gr.Dropdown(
                 ["Math", "Science", "History", "Literature", "Code", "AI"],
                 label="Subject",
@@ -185,23 +155,23 @@ with gr.Blocks(
             )
             submit_button_text = gr.Button("Generate Lesson & Question", variant="primary")
 
-        # Text Output Section
-        with gr.Column(scale=3, elem_classes="text-section"):
-            lesson_output = gr.Markdown(label="Lesson", elem_classes="response-box")
-            question_output = gr.Markdown(label="Comprehension Question", elem_classes="response-box")
-            feedback_output = gr.Markdown(label="Feedback", elem_classes="response-box")
+        with gr.Column(scale=3):
+            # Output fields for lesson, question, and feedback
+            lesson_output = gr.Markdown(label="Lesson", elem_classes="markdown-output")
+            question_output = gr.Markdown(label="Comprehension Question", elem_classes="markdown-output")
+            feedback_output = gr.Markdown(label="Feedback", elem_classes="markdown-output")
 
-    # Image Generation Section (using iframe)
-    with gr.Row(elem_classes="container"):
-        with gr.Column(scale=1, elem_classes="image-section"):
+    # Section for Visual output using iframe
+    with gr.Row():
+        with gr.Column(scale=2):
+            # Note: We're using an iframe, so we don't need a model selector for image generation
             gr.Markdown("## Image Generation")
             gr.Markdown("Use the embedded tool below to generate images.")
-        with gr.Column(scale=4, elem_classes="image-section"):
-            gr.HTML("""
-                <div class="fullframe">
-                    <iframe class="iframe-element" allowfullscreen="true" frameborder="0" src="https://artificialguybr-realvisxl-free-demo.hf.space"></iframe>
-                </div>
-            """)
+            submit_button_visual = gr.Button("Open Visual Tool", variant="primary")
+
+        with gr.Column(scale=3):
+            # Output field for the iframe
+            visual_output = gr.HTML(label="Image Generation Tool")
 
     gr.HTML("""
         <a href="https://discord.com/invite/EM4uHQrakm" class="floating-button" target="_blank">
@@ -211,9 +181,9 @@ with gr.Blocks(
 
     gr.Markdown("""
     ### How to Use
-    1. **Text Section**: Select a subject, difficulty, and model, type your query, and click 'Generate Lesson & Question'.
-    2. **Image Section**: Use the embedded image generation tool to create visuals.
-    3. Review the AI-generated content!
+    1. **Text Section**: Select a subject, difficulty, and model, type your query, and click 'Generate Lesson & Question' to get your personalized lesson, comprehension question, and feedback.
+    2. **Visual Section**: Click 'Open Visual Tool' to load the image generation tool, then use it to generate images.
+    3. Review the AI-generated content to enhance your learning experience!
 
     *Example*: Try "Explain the quicksort algorithm" for text, and use the image tool to generate "a photo of an astronaut riding a horse on mars".
     """)
@@ -226,10 +196,23 @@ with gr.Blocks(
         except Exception as e:
             return f"Error: {str(e)}", "No question available", "No feedback available"
 
+    def load_visual_tool():
+        return """
+        <iframe style="width: 100%; height: 500px;" allowfullscreen="true" frameborder="0" src="https://artificialguybr-realvisxl-free-demo.hf.space"></iframe>
+        """
+
+    # Generate Text-based Output
     submit_button_text.click(
         fn=process_output_text,
         inputs=[subject, difficulty, student_input, model_selector],
         outputs=[lesson_output, question_output, feedback_output]
     )
 
+    # Load Visual Tool (iframe)
+    submit_button_visual.click(
+        fn=load_visual_tool,
+        inputs=[],
+        outputs=[visual_output]
+    )
+
 demo.launch()