ui overhaul

README.md

@@ -8,7 +8,7 @@ sdk_version: 5.30.0
 app_file: app.py
 pinned: false
 thumbnail: >-
-  https://huggingface.co/spaces/lvwerra/jupyter-agent/resolve/main/jupyter-agent.png
+  https://huggingface.co/spaces/lvwerra/jupyter-agent-2/resolve/main/jupyter-agent-2.png
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -29,6 +29,8 @@ DEFAULT_MAX_TOKENS = 512
 SANDBOXES = {}
 SANDBOX_TIMEOUT = 300
 TMP_DIR = './tmp/'
+model="Qwen/Qwen3-Coder-480B-A35B-Instruct:cerebras"
+
 if not os.path.exists(TMP_DIR):
     os.makedirs(TMP_DIR)
 
@@ -44,7 +46,7 @@ The following files are available (if any):
 """
 
 def execute_jupyter_agent(
-    sytem_prompt, user_input, max_new_tokens, model, files, message_history, request: gr.Request
+    user_input, files, message_history, request: gr.Request
 ):
     if request.session_hash not in SANDBOXES:
         SANDBOXES[request.session_hash] = Sandbox(api_key=E2B_API_KEY, timeout=SANDBOX_TIMEOUT)
@@ -68,6 +70,7 @@ def execute_jupyter_agent(
                 sbx.files.write(filpath.name, file)
                 filenames.append(filpath.name)
 
+    sytem_prompt = DEFAULT_SYSTEM_PROMPT
     # Initialize message_history if it doesn't exist
     if len(message_history) == 0:
         if files is None:
@@ -86,7 +89,7 @@ def execute_jupyter_agent(
     #print("history:", message_history)
 
     for notebook_html, notebook_data, messages in run_interactive_notebook(
-        client, model, message_history, sbx, max_new_tokens=max_new_tokens
+        client, model, message_history, sbx,
     ):
         message_history = messages
         
@@ -126,47 +129,26 @@ with gr.Blocks() as demo:
     
     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.", 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("Let's go!")
-        clear_btn = gr.Button("Clear")
     
-    file = gr.File(TMP_DIR+"jupyter-agent.ipynb", label="Download Jupyter Notebook")
+    with gr.Row():
+        generate_btn = gr.Button("Run!")
+        clear_btn = gr.Button("Clear Notebook")
     
-    with gr.Accordion("Upload files", open=False):
+    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")
 
-    with gr.Accordion("Advanced Settings", open=False):
-        system_input = gr.Textbox(
-            label="System Prompt",
-            value=DEFAULT_SYSTEM_PROMPT,
-            elem_classes="input-box",
-            lines=8,
-        )
-        with gr.Row():
-            max_tokens = gr.Number(
-                label="Max New Tokens",
-                value=DEFAULT_MAX_TOKENS,
-                minimum=128,
-                maximum=2048,
-                step=8,
-                interactive=True,
-            )
-
-            model = gr.Dropdown(
-                value="Qwen/Qwen3-Coder-480B-A35B-Instruct:cerebras",
-                choices=[
-                    "Qwen/Qwen3-Coder-30B-A3B-Instruct",
-                    "Qwen/Qwen3-Coder-480B-A35B-Instruct:cerebras",
-                ],
-                label="Models"
-            )
+    powered_html = gr.HTML("""\
+        <p align="center">
+        <img style="height:100px;"src="https://huggingface.co/spaces/lvwerra/jupyter-agent-2/resolve/main/powered-by.png" alt="Powered by" />
+        </p>""")
+    
 
     generate_btn.click(
         fn=execute_jupyter_agent,
-        inputs=[system_input, user_input, max_tokens, model, files, msg_state],
+        inputs=[user_input, files, msg_state],
         outputs=[html_output, msg_state, file],
     )
 

jupyter_handler.py

@@ -9,11 +9,12 @@ import datetime
 
 system_template = """\
 <details>
-  <summary style="display: flex; align-items: center; cursor: pointer;">
-    <span style="background-color: #374151; color: white; padding: 0px 4px; border-radius: 3px; font-weight: 500; display: inline-block;">System:</span>
-    <span class="arrow" style="margin-left: 8px; font-size: 12px;">▶</span>
+  <summary style="display: flex; align-items: center; cursor: pointer; margin-bottom: 12px;">
+    <h3 style="color: #374151; margin: 0; margin-right: 8px; font-size: 14px; font-weight: 600;">System</h3>
+    <span class="arrow" style="margin-right: 12px; font-size: 12px;">▶</span>
+    <div style="flex: 1; height: 2px; background-color: #374151;"></div>
   </summary>
-  <div style="margin-top: 8px; padding: 8px; background-color: #f9fafb; border-radius: 4px; border-left: 3px solid #374151;">
+  <div style="margin-top: 8px; padding: 8px; background-color: #f9fafb; border-radius: 4px; border-left: 3px solid #374151; margin-bottom: 16px;">
     {}
   </div>
 </details>
@@ -36,11 +37,18 @@ details > summary::-webkit-details-marker {{
 """
 
 user_template = """\
-<span style="background-color: #166534; color: white; padding: 0px 4px; border-radius: 3px; font-weight: 500; display: inline-block; margin-bottom: 0px;">User:</span> {}"""
-
+<div style="display: flex; align-items: center; margin-bottom: 12px;">
+    <h3 style="color: #166534; margin: 0; margin-right: 12px; font-size: 14px; font-weight: 600;">User</h3>
+    <div style="flex: 1; height: 2px; background-color: #166534;"></div>
+</div>
+<div style="margin-bottom: 16px;">{}</div>"""
 
 assistant_thinking_template = """\
-<span style="background-color: #1d5b8e; color: white; padding: 0px 4px; border-radius: 3px; font-weight: 500; display: inline-block; margin-bottom: 0px;">Assistant:</span> {}"""
+<div style="display: flex; align-items: center; margin-bottom: 12px;">
+    <h3 style="color: #1d5b8e; margin: 0; margin-right: 12px; font-size: 14px; font-weight: 600;">Assistant</h3>
+    <div style="flex: 1; height: 2px; background-color: #1d5b8e;"></div>
+</div>
+<div style="margin-bottom: 16px;">{}</div>"""
 
 assistant_final_answer_template = """<div class="alert alert-block alert-warning">
 <b>Assistant:</b> Final answer: {}
@@ -48,11 +56,11 @@ assistant_final_answer_template = """<div class="alert alert-block alert-warning
 """
 
 header_message = """<p align="center">
-  <img src="https://huggingface.co/spaces/lvwerra/jupyter-agent/resolve/main/jupyter-agent.png" alt="Jupyter Agent Logo" />
+  <img style="height:120px;"src="https://huggingface.co/spaces/lvwerra/jupyter-agent-2/resolve/main/jupyter-agent-2.png" alt="Jupyter Agent Logo" />
 </p>
 
 
-<p style="text-align:center;">Let a LLM agent write and execute code inside a notebook!</p>"""
+<p style="text-align:center;">Running Qwen3-Coder-480B-A35B-Instruct in a Jupyter notebook powered by E2B, Cerebras and Hugging Face Inference Providers.</p>"""
 
 bad_html_bad = """input[type="file"] {
   display: block;
@@ -195,6 +203,33 @@ TIMEOUT_HTML = """
 </style>
 """
 
+TIMEOUT_HTML = """
+<div style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; background-color: #fafafa; border-radius: 4px; border-left: 2px solid #d1d5db; margin-bottom: 8px; font-size: 12px;">
+    <div style="width: 12px; height: 12px; background-color: #d1d5db; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 8px;">
+        ⏱
+    </div>
+    <div style="flex: 1;">
+        <div style="margin-bottom: 2px; font-size: 11px; color: #6b7280; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400;">
+            Sandbox timeout: {total_seconds}s
+        </div>
+        <div style="width: 100%; height: 6px; background-color: #e5e7eb; border-radius: 3px; overflow: hidden;">
+            <div id="progress-bar-{unique_id}" style="height: 100%; background-color: #6b7280; border-radius: 3px; width: {current_progress}%; animation: progress-fill-{unique_id} {remaining_seconds}s linear forwards;"></div>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-top: 2px; font-size: 10px; color: #9ca3af; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+            <span>Started: {start_time}</span>
+            <span>Expires: {end_time}</span>
+        </div>
+    </div>
+</div>
+
+<style>
+@keyframes progress-fill-{unique_id} {{
+    from {{ width: {current_progress}%; }}
+    to {{ width: 100%; }}
+}}
+</style>
+"""
+
 # just make the code font a bit smaller
 custom_css = """
 <style type="text/css">
@@ -569,4 +604,35 @@ class JupyterNotebook:
         # make code font a bit smaller with custom css
         if "<head>" in notebook_body:
             notebook_body = notebook_body.replace("</head>", f"{custom_css}</head>")
-        return notebook_body
+        return notebook_body
+    
+def main():
+    """Create a mock notebook to test styling"""
+    # Create mock messages
+    mock_messages = [
+        {"role": "system", "content": "You are a helpful AI assistant that can write and execute Python code."},
+        {"role": "user", "content": "Can you help me create a simple plot of a sine wave?"},
+        {"role": "assistant", "content": "I'll help you create a sine wave plot using matplotlib. Let me write the code for that."},
+        {"role": "assistant", "tool_calls": [{"id": "call_1", "function": {"name": "add_and_execute_jupyter_code_cell", "arguments": '{"code": "import numpy as np\\nimport matplotlib.pyplot as plt\\n\\n# Create x values\\nx = np.linspace(0, 4*np.pi, 100)\\ny = np.sin(x)\\n\\n# Create the plot\\nplt.figure(figsize=(10, 6))\\nplt.plot(x, y, \'b-\', linewidth=2)\\nplt.title(\'Sine Wave\')\\nplt.xlabel(\'x\')\\nplt.ylabel(\'sin(x)\')\\nplt.grid(True)\\nplt.show()"}'}}]},
+        {"role": "tool", "tool_call_id": "call_1", "raw_execution": [{"output_type": "stream", "name": "stdout", "text": "Plot created successfully!"}]}
+    ]
+    
+    # Create notebook
+    notebook = JupyterNotebook(mock_messages)
+    
+    # Add a timeout countdown (simulating a sandbox that started 2 minutes ago with 5 minute timeout)
+    start_time = datetime.datetime.now(datetime.timezone.utc) - datetime.timedelta(minutes=2)
+    end_time = start_time + datetime.timedelta(minutes=5)
+    notebook.add_sandbox_countdown(start_time, end_time)
+    
+    # Render and save
+    html_output = notebook.render()
+    
+    with open("mock_notebook.html", "w", encoding="utf-8") as f:
+        f.write(html_output)
+    
+    print("Mock notebook saved as 'mock_notebook.html'")
+    print("Open it in your browser to see the styling changes.")
+
+if __name__ == "__main__":
+    main()