3 columns test

README.md

@@ -1,6 +1,6 @@
 ---
-title: Jupyter Agent 2
-emoji: 🏃
+title: NBH LIVE EDITOR
+emoji: 
 colorFrom: red
 colorTo: purple
 sdk: gradio

app.py

@@ -23,6 +23,25 @@ from utils import (
     run_interactive_notebook,
 )
 
+def _messages_to_chat_pairs(messages):
+    """Convert internal message history to Chatbot (user, assistant) pairs."""
+    pairs = []
+    last_user = None
+    for m in messages:
+        role = m.get("role")
+        if role == "user":
+            last_user = m.get("content", "")
+        elif role == "assistant":
+            content = m.get("content") or ""
+            if last_user is not None or content:
+                pairs.append((last_user or "", content))
+                last_user = None
+        else:
+            continue
+    if last_user is not None:
+        pairs.append((last_user, ""))
+    return pairs
+
 E2B_API_KEY = os.environ["E2B_API_KEY"]
 HF_TOKEN = os.environ["HF_TOKEN"] #HfFolder.get_token() #
 DEFAULT_MAX_TOKENS = 512
@@ -111,7 +130,13 @@ def execute_jupyter_agent(
 
     with open(save_dir, 'w', encoding='utf-8') as f:
         json.dump(init_notebook.data, f, indent=2)
-    yield init_notebook.render(), message_history, save_dir
+    yield (
+        init_notebook.render(),
+        init_notebook.render(),
+        _messages_to_chat_pairs(message_history),
+        message_history,
+        save_dir,
+    )
 
     client = OpenAI(
         base_url="https://router.huggingface.co/v1",
@@ -149,12 +174,24 @@ def execute_jupyter_agent(
         client, model, message_history, sbx,
     ):
         message_history = messages
-        
-        yield notebook_html, message_history, TMP_DIR+"jupyter-agent.ipynb"
+
+        yield (
+            notebook_html,
+            notebook_html,
+            _messages_to_chat_pairs(message_history),
+            message_history,
+            TMP_DIR+"jupyter-agent.ipynb",
+        )
     
     with open(save_dir, 'w', encoding='utf-8') as f:
         json.dump(notebook_data, f, indent=2)
-    yield notebook_html, message_history, save_dir
+    yield (
+        notebook_html,
+        notebook_html,
+        _messages_to_chat_pairs(message_history),
+        message_history,
+        save_dir,
+    )
 
 def clear(msg_state, request: gr.Request):
     if request.session_hash in SANDBOXES:
@@ -166,55 +203,69 @@ def clear(msg_state, request: gr.Request):
 
 
 css = """
-#component-0 {
-    height: 100vh;
-    overflow-y: auto;
-    padding: 20px;
-}
-
-.gradio-container {
-    height: 100vh !important;
-}
-
-.contain {
-    height: 100vh !important;
-}
+.gradio-container, .contain { height: 100vh !important; }
+.three-col { height: calc(100vh - 20px); }
+.col { display: flex; flex-direction: column; height: 100%; }
+.col .scroll { flex: 1 1 auto; overflow: auto; }
+.controls { margin-top: 8px; }
 """
 
 
 # Create the interface
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     msg_state = gr.State(value=[])
 
-    html_output = gr.HTML(value=JupyterNotebook().render())
-    
-    user_input = gr.Textbox(
-        #value="Write code to multiply three numbers: 10048, 32, 19", lines=3, label="User input"
-        value="Solve the Lotka-Volterra equation and plot the results. Do it step by step and explain what you are doing and in the end make a super nice and clean plot.", label="Agent task"
-    )
-    
-    with gr.Row():
-        generate_btn = gr.Button("Run!")
-        clear_btn = gr.Button("Clear Notebook")
-    
-    with gr.Accordion("Upload files ⬆ | Download notebook⬇", open=False):
-        files = gr.File(label="Upload files to use", file_count="multiple")
-        file = gr.File(TMP_DIR+"jupyter-agent.ipynb", label="Download Jupyter Notebook")
-
-    powered_html = gr.HTML("""\
-        <p align="center">
-             <img style="max-height:100px; max-width:100%; height:auto;"src="https://huggingface.co/spaces/lvwerra/jupyter-agent-2/resolve/main/powered-by.png" alt="Powered by" />
-        </p>""")
-    
-
+    with gr.Row(elem_classes=["three-col"]):
+        # Column 1: Notebook (rendered)
+        with gr.Column(scale=1, elem_classes=["col"]):
+            notebook_html = gr.HTML(value=JupyterNotebook().render(), label="Notebook", elem_classes=["scroll"])
+
+        # Column 2: Live HTML Preview (auto-updates with notebook)
+        with gr.Column(scale=1, elem_classes=["col"]):
+            preview_html = gr.HTML(value=JupyterNotebook().render(), label="Live Preview", elem_classes=["scroll"])
+
+        # Column 3: Chat interface + controls
+        with gr.Column(scale=1, elem_classes=["col"]):
+            chatbot = gr.Chatbot(label="Chat", elem_classes=["scroll"])
+
+            user_input = gr.Textbox(
+                value="Solve the Lotka-Volterra equation and plot the results. Do it step by step and explain what you are doing and in the end make a super nice and clean plot.",
+                label="Message",
+                placeholder="Ask something or give a task...",
+                lines=3,
+            )
+            with gr.Row(elem_classes=["controls"]):
+                generate_btn = gr.Button("Send")
+                clear_btn = gr.Button("Clear Notebook")
+
+            with gr.Accordion("Upload files ⬆ | Download notebook⬇", open=False):
+                files = gr.File(label="Upload files to use", file_count="multiple")
+                file = gr.File(TMP_DIR+"jupyter-agent.ipynb", label="Download Jupyter Notebook")
+
+            powered_html = gr.HTML("""\
+                <p align=\"center\">\
+                     <img style=\"max-height:100px; max-width:100%; height:auto;\"src=\"https://huggingface.co/spaces/lvwerra/jupyter-agent-2/resolve/main/powered-by.png\" alt=\"Powered by\" />
+                </p>""")
+
+    # Wire interactions: button click and textbox submit both drive the agent
     generate_btn.click(
         fn=execute_jupyter_agent,
         inputs=[user_input, files, msg_state],
-        outputs=[html_output, msg_state, file],
+        outputs=[notebook_html, preview_html, chatbot, msg_state, file],
+        show_progress="hidden",
+    )
+    user_input.submit(
+        fn=execute_jupyter_agent,
+        inputs=[user_input, files, msg_state],
+        outputs=[notebook_html, preview_html, chatbot, msg_state, file],
         show_progress="hidden",
     )
 
-    clear_btn.click(fn=clear, inputs=[msg_state], outputs=[html_output, msg_state])
+    clear_btn.click(
+        fn=clear,
+        inputs=[msg_state],
+        outputs=[notebook_html, msg_state],
+    )
 
     demo.load(
         fn=None,