Merge branch 'main' of github.com:HelmholtzW/likable

app.py

@@ -1,3 +1,7 @@
+import importlib.util
+import os
+import sys
+
 import gradio as gr
 
 from planning_agent import GradioPlanningAgent
@@ -85,78 +89,86 @@ strategy. Check the detailed view for the complete plan!"""
     return history, ""
 
 
-# Mock functions for preview and code
-def get_preview_content():
-    """Return HTML content for preview"""
-    return """
-    <div style="padding: 20px; font-family: Arial, sans-serif;">
-        <h2>Preview - Generated App</h2>
-        <div style="border: 1px solid #ddd; padding: 15px; margin: 10px 0;
-                    border-radius: 8px;">
-            <h3>Todo App</h3>
-            <input type="text" placeholder="Add a new task..."
-                   style="width: 70%; padding: 8px; margin-right: 10px;">
-            <button style="padding: 8px 15px; background: #007bff; color: white;
-                           border: none; border-radius: 4px;">Add</button>
-            <ul style="margin-top: 15px; list-style-type: none; padding: 0;">
-                <li style="padding: 8px; border-bottom: 1px solid #eee;">
-                    ✓ Learn Gradio</li>
-                <li style="padding: 8px; border-bottom: 1px solid #eee;">
-                    ✓ Build awesome UIs</li>
-                <li style="padding: 8px; border-bottom: 1px solid #eee;">
-                    ⬜ Deploy to HuggingFace</li>
-            </ul>
-        </div>
-        <p style="color: #666; font-size: 14px;">
-            This is a live preview of your generated application.</p>
-    </div>
-    """
-
-
-def get_code_content():
-    """Return code content for the code view"""
-    return """import gradio as gr
-
-def add_task(new_task, tasks):
-    if new_task.strip():
-        tasks.append(new_task)
-    return "", tasks
-
-def create_todo_app():
-    with gr.Blocks() as app:
-        gr.Markdown("# Todo App")
-
-        with gr.Row():
-            new_task = gr.Textbox(
-                placeholder="Add a new task...",
-                scale=3,
-                container=False
-            )
-            add_btn = gr.Button("Add", scale=1)
+def load_file(path):
+    if path is None:
+        return ""
+    # path is a string like "subdir/example.py"
+    with open(path, encoding="utf-8") as f:
+        return f.read()
 
-        task_list = gr.Dataframe(
-            headers=["Tasks"],
-            datatype=["str"],
-            interactive=False
-        )
 
-        add_btn.click(
-            add_task,
-            inputs=[new_task, task_list],
-            outputs=[new_task, task_list]
-        )
+def save_file(path, new_text):
+    if path is None:
+        gr.Warning("⚠️ No file selected.")
+    try:
+        with open(path, "w", encoding="utf-8") as f:
+            f.write(new_text)
+        gr.Info(f"✅ Saved to: {path.split('sandbox/')[-1]}")
+    except Exception as e:
+        gr.Error(f"❌ Error saving: {e}")
+
+
+def load_and_render_app():
+    """Load and render the Gradio app from sandbox/app.py"""
+    app_path = "sandbox/app.py"
 
-        new_task.submit(
-            add_task,
-            inputs=[new_task, task_list],
-            outputs=[new_task, task_list]
+    if not os.path.exists(app_path):
+        return gr.HTML(
+            "<div style='padding: 20px; color: red;'>❌ No app.py found in \
+sandbox directory</div>"
         )
 
-    return app
+    try:
+        # Read the app code
+        with open(app_path, encoding="utf-8") as f:
+            app_code = f.read()
+
+        # Create a temporary module
+        spec = importlib.util.spec_from_loader("dynamic_app", loader=None)
+        module = importlib.util.module_from_spec(spec)
+
+        # Add current directory to sys.path if not already there
+        if os.getcwd() not in sys.path:
+            sys.path.insert(0, os.getcwd())
+
+        # Execute the code in the module's namespace
+        exec(app_code, module.__dict__)
+
+        # Look for common app creation patterns
+        app_instance = None
+
+        # Try to find the app instance
+        if hasattr(module, "demo"):
+            app_instance = module.demo
+        elif hasattr(module, "app"):
+            app_instance = module.app
+        elif hasattr(module, "interface"):
+            app_instance = module.interface
+        else:
+            # Look for any Gradio Blocks or Interface objects
+            for _, obj in module.__dict__.items():
+                if isinstance(obj, gr.Blocks | gr.Interface):
+                    app_instance = obj
+                    break
+
+        if app_instance is None:
+            return gr.HTML(
+                "<div style='padding: 20px; color: orange;'>⚠️ No Gradio app found. \
+Make sure your app.py creates a Gradio Blocks or Interface object.</div>"
+            )
+
+        # Return the app instance to be rendered
+        return app_instance
 
-if __name__ == "__main__":
-    demo = create_todo_app()
-    demo.launch()"""
+    except Exception as e:
+        error_html = f"""
+        <div style='padding: 20px; color: red; font-family: monospace;'>
+            ❌ Error loading app:<br>
+            <pre style='background: #f5f5f5; padding: 10px; margin-top: 10px; \
+border-radius: 4px;'>{str(e)}</pre>
+        </div>
+        """
+        return gr.HTML(error_html)
 
 
 # Create the main Lovable-style UI
@@ -164,105 +176,89 @@ def create_lovable_ui():
     with gr.Blocks(
         title="💗Likable",
         theme=gr.themes.Soft(),
+        fill_height=True,
+        fill_width=True,
     ) as demo:
         gr.Markdown("# 💗Likable")
         # gr.Markdown(
         #     "*It's almost Lovable - Build Gradio apps using only a chat interface*"
         # )
 
-        with gr.Tabs():
-            # Preview Tab
-            with gr.TabItem("Preview"):
-                with gr.Row(elem_classes="main-container", equal_height=True):
-                    # Left side - Chat Interface
-                    with gr.Column(scale=1, elem_classes="chat-container"):
-                        chatbot_preview = gr.Chatbot(
-                            height=500,
-                            show_copy_button=True,
-                            avatar_images=(None, "🤖"),
-                            type="messages",
-                        )
-
-                        with gr.Row():
-                            msg_input_preview = gr.Textbox(
-                                placeholder="Describe what you want to build...",
-                                scale=4,
-                                container=False,
-                            )
-                            send_btn_preview = gr.Button(
-                                "Send", scale=1, variant="primary"
-                            )
-
-                    # Right side - Preview Content
-                    with gr.Column(scale=4, elem_classes="content-container"):
-                        # with gr.Row():
-                        #     gr.Button(
-                        #         "Deploy to HF Spaces", variant="secondary", scale=1
-                        #     )
-
-                        gr.HTML(value=get_preview_content())
-
-            # Code Tab
-            with gr.TabItem("Code"):
-                with gr.Row(elem_classes="main-container", equal_height=True):
-                    # Left side - Chat Interface
-                    with gr.Column(scale=1, elem_classes="chat-container"):
-                        chatbot_code = gr.Chatbot(
-                            height=500,
-                            show_copy_button=True,
-                            avatar_images=(None, "🤖"),
-                            type="messages",
+        with gr.Row(elem_classes="main-container"):
+            # Left side - Chat Interface
+            with gr.Column(scale=1, elem_classes="chat-container"):
+                chatbot = gr.Chatbot(
+                    show_copy_button=True,
+                    avatar_images=(None, "🤖"),
+                    bubble_full_width=False,
+                    height="75vh",
+                )
+
+                with gr.Row():
+                    msg_input = gr.Textbox(
+                        placeholder="Describe what you want to build...",
+                        scale=4,
+                        container=False,
+                    )
+                    send_btn = gr.Button("Send", scale=1, variant="primary")
+
+            # Right side - Preview/Code Toggle
+            with gr.Column(scale=4, elem_classes="preview-container"):
+                with gr.Tab("Preview"):
+                    # Create a trigger for refreshing the preview
+                    refresh_trigger = gr.State(value=0)
+
+                    # Use gr.render for dynamic app rendering
+                    @gr.render(inputs=refresh_trigger)
+                    def render_preview(trigger_value):
+                        return load_and_render_app()
+
+                with gr.Tab("Code"):
+                    with gr.Row():
+                        save_btn = gr.Button("Save", size="sm")
+                    with gr.Row(equal_height=True):
+                        file_explorer = gr.FileExplorer(
+                            scale=1,
+                            file_count="single",
+                            value="app.py",
+                            root_dir="sandbox",
                         )
-
-                        with gr.Row():
-                            msg_input_code = gr.Textbox(
-                                placeholder="Describe what you want to build...",
-                                scale=4,
-                                container=False,
-                            )
-                            send_btn_code = gr.Button(
-                                "Send", scale=1, variant="primary"
-                            )
-
-                    # Right side - Code Content
-                    with gr.Column(scale=4, elem_classes="content-container"):
-                        # with gr.Row():
-                        #     gr.Button(
-                        #         "Deploy to HF Spaces", variant="secondary", scale=1
-                        #     )
-
-                        gr.Code(
-                            value=get_code_content(),
+                        code_editor = gr.Code(
+                            scale=3,
+                            value=load_file("sandbox/app.py"),
                             language="python",
-                            lines=20,
-                            wrap_lines=True,
-                            show_label=False,
+                            visible=True,
+                            interactive=True,
+                            # lines=27,
+                            # max_lines=27,
+                            autocomplete=True,
                         )
 
-        # Event handlers for Preview tab
-        msg_input_preview.submit(
-            ai_response_with_planning,
-            inputs=[msg_input_preview, chatbot_preview],
-            outputs=[chatbot_preview, msg_input_preview],
-        )
+        # Event handlers
+        file_explorer.change(fn=load_file, inputs=file_explorer, outputs=code_editor)
 
-        send_btn_preview.click(
-            ai_response_with_planning,
-            inputs=[msg_input_preview, chatbot_preview],
-            outputs=[chatbot_preview, msg_input_preview],
+        def save_and_refresh(path, new_text, current_trigger):
+            save_file(path, new_text)
+            # Increment trigger to refresh the preview
+            return current_trigger + 1
+
+        save_btn.click(
+            fn=save_and_refresh,
+            inputs=[file_explorer, code_editor, refresh_trigger],
+            outputs=[refresh_trigger],
         )
 
-        # Event handlers for Code tab
-        msg_input_code.submit(
+        # Event handlers for chat
+        msg_input.submit(
             ai_response_with_planning,
-            inputs=[msg_input_code, chatbot_code],
-            outputs=[chatbot_code, msg_input_code],
+            inputs=[msg_input, chatbot],
+            outputs=[chatbot, msg_input],
         )
 
-        send_btn_code.click(
+        send_btn.click(
             ai_response_with_planning,
-            inputs=[msg_input_code, chatbot_code],
-            outputs=[chatbot_code, msg_input_code],
+            inputs=[msg_input, chatbot],
+            outputs=[chatbot, msg_input],
         )
 
     return demo

sandbox/app.py

@@ -0,0 +1,69 @@
+import gradio as gr
+
+# Global list to store tasks
+tasks = []
+
+
+def add_task(task_text):
+    """Add a new task to the list"""
+    if task_text.strip():
+        tasks.append({"text": task_text.strip(), "completed": False})
+    return update_task_display(), ""
+
+
+def toggle_task(task_index):
+    """Toggle completion status of a task"""
+    if 0 <= task_index < len(tasks):
+        tasks[task_index]["completed"] = not tasks[task_index]["completed"]
+    return update_task_display()
+
+
+def delete_task(task_index):
+    """Delete a task from the list"""
+    if 0 <= task_index < len(tasks):
+        tasks.pop(task_index)
+    return update_task_display()
+
+
+def update_task_display():
+    """Update the task display"""
+    if not tasks:
+        return "No tasks yet!"
+
+    display_text = ""
+    for i, task in enumerate(tasks):
+        status = "✓" if task["completed"] else "○"
+        display_text += f"{i}: {status} {task['text']}\n"
+    return display_text
+
+
+# Create Gradio interface
+with gr.Blocks(title="Simple To-Do List", theme=gr.themes.Monochrome()) as app:
+    gr.Markdown("# Simple To-Do List")
+
+    with gr.Row():
+        task_input = gr.Textbox(
+            placeholder="Enter a new task...", label="New Task", scale=3
+        )
+        add_btn = gr.Button("Add Task", scale=1)
+
+    task_display = gr.Textbox(
+        value="No tasks yet!", label="Tasks", lines=10, interactive=False
+    )
+
+    with gr.Row():
+        task_index = gr.Number(label="Task Number", value=0, precision=0)
+        toggle_btn = gr.Button("Toggle Complete")
+        delete_btn = gr.Button("Delete Task")
+
+    # Event handlers
+    add_btn.click(add_task, inputs=[task_input], outputs=[task_display, task_input])
+
+    task_input.submit(add_task, inputs=[task_input], outputs=[task_display, task_input])
+
+    toggle_btn.click(toggle_task, inputs=[task_index], outputs=[task_display])
+
+    delete_btn.click(delete_task, inputs=[task_index], outputs=[task_display])
+
+if __name__ == "__main__":
+    app.launch()