Update app.py

app.py

@@ -14,8 +14,7 @@ from agent import (
 )
 from utils import parse_action, parse_file_content, read_python_module_structure
 
-# Global Variables for App State
-app_state = {"components": []}
+# Global Variables
 terminal_history = ""
 
 # Component Library
@@ -92,22 +91,80 @@ class Component:
             )
         return components_registry[self.type]["code_snippet"].format(**self.properties)
 
-# Function to update the app canvas (for preview)
-def update_app_canvas():
-    components_html = "".join([
-        f"<div>Component ID: {component['id']}, Type: {component['type']}, Properties: {component['properties']}</div>"
-        for component in app_state["components"]
-    ])
-    return components_html
-
-# Function to handle component addition
-def add_component(component_type):
-    if component_type in components_registry:
+# App Creation Process Class
+class AppCreationProcess:
+    def __init__(self):
+        self.current_step = 1
+        self.app_name = ""
+        self.components = []
+
+    def next_step(self):
+        self.current_step += 1
+
+    def previous_step(self):
+        if self.current_step > 1:
+            self.current_step -= 1
+
+    def get_current_step_info(self):
+        steps = {
+            1: "App Initialization",
+            2: "Component Addition",
+            3: "Property Configuration",
+            4: "Code Generation",
+            5: "Deployment"
+        }
+        return f"Step {self.current_step}: {steps[self.current_step]}"
+
+    def add_component(self, component_type):
         new_component = Component(component_type)
-        app_state["components"].append(new_component.to_dict())
-        return update_app_canvas(), f"System: Added component: {component_type}\n"
-    else:
-        return None, f"Error: Invalid component type: {component_type}\n"
+        self.components.append(new_component.to_dict())
+        return self.update_app_canvas()
+
+    def set_component_property(self, component_id, property_name, property_value):
+        for component in self.components:
+            if component['id'] == component_id:
+                if property_name in component['properties']:
+                    component['properties'][property_name.strip()] = property_value.strip()
+                    return self.update_app_canvas(), f"Property '{property_name}' set to '{property_value}' for component {component_id}"
+                else:
+                    return None, f"Error: Property '{property_name}' not found in component {component_id}"
+        return None, f"Error: Component with ID {component_id} not found."
+
+    def update_app_canvas(self):
+        components_html = "".join([
+            f"<div>Component ID: {component['id']}, Type: {component['type']}, Properties: {component['properties']}</div>"
+            for component in self.components
+        ])
+        return components_html
+
+    def generate_python_code(self):
+        code = f"""import gradio as gr\n\nwith gr.Blocks() as {self.app_name}:\n"""
+        for component in self.components:
+            code += "    " + Component(**component).render() + "\n"
+        code += f"\n{self.app_name}.launch()\n"
+        return code
+
+    def deploy_to_huggingface(self):
+        # Generate Python code
+        code = self.generate_python_code()
+        # Create requirements.txt
+        with open("requirements.txt", "w") as f:
+            f.write("gradio==3.32.0\n")
+        # Create the app.py file
+        with open("app.py", "w") as f:
+            f.write(code)
+        # Execute the deployment command
+        try:
+            subprocess.run(["huggingface-cli", "repo", "create", "--type", "space", "--space_sdk", "gradio", self.app_name], check=True)
+            subprocess.run(["git", "init"], cwd=f"./{self.app_name}", check=True)
+            subprocess.run(["git", "add", "."], cwd=f"./{self.app_name}", check=True)
+            subprocess.run(["git", "commit", "-m", "Initial commit"], cwd=f"./{self.app_name}", check=True)
+            subprocess.run(["git", "push", "https://huggingface.co/spaces/" + self.app_name, "main"], cwd=f"./{self.app_name}", check=True)
+            return f"Successfully deployed to Hugging Face Spaces: https://huggingface.co/spaces/{self.app_name}"
+        except Exception as e:
+            return f"Error deploying to Hugging Face Spaces: {e}"
+
+app_process = AppCreationProcess()
 
 # Function to handle terminal input
 def run_terminal_command(command, history):
@@ -117,15 +174,14 @@ def run_terminal_command(command, history):
         # Basic command parsing (expand with NLP)
         if command.startswith("add "):
             component_type = command.split("add ", 1)[1].strip()
-            _, output = add_component(component_type)
+            output = app_process.add_component(component_type)
         elif command.startswith("set "):
             _, output = set_component_property(command)
         elif command.startswith("search "):
             search_query = command.split("search ", 1)[1].strip()
             output = i_s(search_query)
         elif command.startswith("deploy "):
-            app_name = command.split("deploy ", 1)[1].strip()
-            output = deploy_to_huggingface(app_name)
+            output = app_process.deploy_to_huggingface()
         else:
             # Attempt to execute command as Python code
             try:
@@ -149,18 +205,7 @@ def set_component_property(command):
             raise ValueError("Invalid 'set' command format.")
         component_id = int(set_parts[0])  # Use component ID
         property_name, property_value = set_parts[1].split("=", 1)
-        # Find component by ID
-        component_found = False
-        for component in app_state["components"]:
-            if component["id"] == component_id:
-                if property_name in component["properties"]:
-                    component["properties"][property_name.strip()] = property_value.strip()
-                    component_found = True
-                    return update_app_canvas(), f"System: Property '{property_name}' set to '{property_value}' for component {component_id}\n"
-                else:
-                    return None, f"Error: Property '{property_name}' not found in component {component_id}\n"
-        if not component_found:
-            return None, f"Error: Component with ID {component_id} not found.\n"
+        return app_process.set_component_property(component_id, property_name, property_value)
     except Exception as e:
         return None, f"Error: {str(e)}\n"
 
@@ -178,47 +223,98 @@ def run_chat(message, history):
         else:
             return history, terminal_history + f"User: {message}\nAssistant: I'm sorry, I couldn't generate a response. Please try again.\n"
 
-# Code Generation
-def generate_python_code(app_name):
-    code = f"""import gradio as gr\n\nwith gr.Blocks() as {app_name}:\n"""
-    for component in app_state["components"]:
-        code += "    " + Component(**component).render() + "\n"
-    code += f"\n{app_name}.launch()\n"
-    return code
-
-# Hugging Face Deployment
-def deploy_to_huggingface(app_name):
-    # Generate Python code
-    code = generate_python_code(app_name)
-    # Create requirements.txt
-    with open("requirements.txt", "w") as f:
-        f.write("gradio==3.32.0\n")
-    # Create the app.py file
-    with open("app.py", "w") as f:
-        f.write(code)
-    # Execute the deployment command
-    try:
-        subprocess.run(["huggingface-cli", "repo", "create", "--type", "space", "--space_sdk", "gradio", app_name], check=True)
-        subprocess.run(["git", "init"], cwd=f"./{app_name}", check=True)
-        subprocess.run(["git", "add", "."], cwd=f"./{app_name}", check=True)
-        subprocess.run(["git", "commit", "-m", "Initial commit"], cwd=f"./{app_name}", check=True)
-        subprocess.run(["git", "push", "https://huggingface.co/spaces/" + app_name, "main"], cwd=f"./{app_name}", check=True)
-        return f"Successfully deployed to Hugging Face Spaces: https://huggingface.co/spaces/{app_name}"
-    except Exception as e:
-        return f"Error deploying to Hugging Face Spaces: {e}"
-
 # Gradio Interface
 with gr.Blocks() as iface:
-    # Chat Interface
-    chat_history = gr.Chatbot(label="Chat with Agent")
-    chat_input = gr.Textbox(label="Your Message")
-    chat_button = gr.Button("Send")
-    chat_button.click(run_chat, inputs=[chat_input, chat_history], outputs=[chat_history, terminal_output])
+    gr.Markdown("# Sequential App Builder")
     
-    # Terminal
-    terminal_output = gr.Textbox(lines=8, label="Terminal", value=terminal_history)
-    terminal_input = gr.Textbox(label="Enter Command")
-    terminal_button = gr.Button("Run")
-    terminal_button.click(run_terminal_command, inputs=[terminal_input, terminal_output], outputs=terminal_output)
+    with gr.Row():
+        current_step = gr.Markdown(app_process.get_current_step_info())
+    
+    with gr.Row():
+        prev_button = gr.Button("Previous Step")
+        next_button = gr.Button("Next Step")
+
+    # Step 1: App Initialization
+    with gr.Group() as step1:
+        app_name_input = gr.Textbox(label="Enter App Name")
+        init_app_button = gr.Button("Initialize App")
+
+    # Step 2: Component Addition
+    with gr.Group() as step2:
+        component_type = gr.Dropdown(choices=list(components_registry.keys()), label="Select Component Type")
+        add_component_button = gr.Button("Add Component")
+        components_display = gr.HTML()
+
+    # Step 3: Property Configuration
+    with gr.Group() as step3:
+        component_id = gr.Number(label="Component ID")
+        property_name = gr.Textbox(label="Property Name")
+        property_value = gr.Textbox(label="Property Value")
+        set_property_button = gr.Button("Set Property")
+
+    # Step 4: Code Generation
+    with gr.Group() as step4:
+        generated_code = gr.Code(language="python")
+        generate_code_button = gr.Button("Generate Code")
+
+    # Step 5: Deployment
+    with gr.Group() as step5:
+        deploy_button = gr.Button("Deploy to Hugging Face Spaces")
+        deployment_status = gr.Markdown()
+
+    # Chat and Terminal (optional, can be hidden or shown based on preference)
+    with gr.Accordion("Advanced", open=False):
+        chat_history = gr.Chatbot(label="Chat with Agent")
+        chat_input = gr.Textbox(label="Your Message")
+        chat_button = gr.Button("Send")
+        
+        terminal_output = gr.Textbox(lines=8, label="Terminal", value=terminal_history)
+        terminal_input = gr.Textbox(label="Enter Command")
+        terminal_button = gr.Button("Run")
+
+    # Function to update visibility based on current step
+    def update_visibility(step):
+        return {
+            step1: gr.update(visible=(step == 1)),
+            step2: gr.update(visible=(step == 2)),
+            step3: gr.update(visible=(step == 3)),
+            step4: gr.update(visible=(step == 4)),
+            step5: gr.update(visible=(step == 5)),
+        }
+
+    # Event handlers
+    def next_step():
+        app_process.next_step()
+        return app_process.get_current_step_info(), update_visibility(app_process.current_step)
+
+    def prev_step():
+        app_process.previous_step()
+        return app_process.get_current_step_info(), update_visibility(app_process.current_step)
+
+    next_button.click(next_step, outputs=[current_step, step1, step2, step3, step4, step5])
+    prev_button.click(prev_step, outputs=[current_step, step1, step2, step3, step4, step5])
+
+    # Step 1: Initialize App
+    def init_app(name):
+        app_process.app_name = name
+        return f"App '{name}' initialized."
+
+    init_app_button.click(init_app, inputs=[app_name_input], outputs=[components_display])
+
+    # Step 2: Add Component
+    add_component_button.click(app_process.add_component, inputs=[component_type], outputs=[components_display])
+
+    # Step 3: Set Property
+    set_property_button.click(app_process.set_component_property, inputs=[component_id, property_name, property_value], outputs=[components_display])
+
+    # Step 4: Generate Code
+    generate_code_button.click(app_process.generate_python_code, outputs=[generated_code])
+
+    # Step 5: Deploy
+    deploy_button.click(app_process.deploy_to_huggingface, outputs=[deployment_status])
+
+    # Existing chat and terminal functionality
+    chat_button.click(run_chat, inputs=[chat_input, chat_history], outputs=[chat_history, terminal_output])
+    terminal_button.click(run_terminal_command, inputs=[terminal_input, terminal_output], outputs=[terminal_output])
 
 iface.launch()