Update app.py

app.py

@@ -7,32 +7,34 @@ from pathlib import Path
 
 import gradio as gr
 import openai
-from flask import Flask, request, jsonify
 from dotenv import load_dotenv
 
 from utils import sanitize_code, extract_code_blocks, validate_gradio_code
 
-# Load environment variables
+# Load environment variables (for local development)
 load_dotenv()
 
-# Configure OpenAI API
-openai.api_key = os.getenv("OPENAI_API_KEY")
-
-# For development purposes, use a placeholder key if not provided
-# This will still fail when making actual API calls, but prevents immediate startup failure
-if not openai.api_key:
-    print("WARNING: OPENAI_API_KEY environment variable is not set. Using placeholder for startup.")
-    print("You will need to add your API key in the Hugging Face Space settings as a secret.")
-    openai.api_key = "placeholder_key_replace_in_hf_settings"
-
-app = Flask(__name__)
+# Global variables
 generated_app = None
 current_code = ""
+user_api_key = ""
 
-def generate_gradio_app(prompt):
+def generate_gradio_app(api_key, prompt):
     """Generate Gradio app code using OpenAI API"""
+    global user_api_key
+    
+    # Validate API key
+    if not api_key or len(api_key) < 20:
+        return None, "Please provide a valid OpenAI API key"
+    
+    # Store API key for this session
+    user_api_key = api_key
+    
     try:
-        response = openai.chat.completions.create(
+        # Configure client with user's API key
+        client = openai.OpenAI(api_key=api_key)
+        
+        response = client.chat.completions.create(
             model="gpt-4o",  # Using gpt-4o for best code generation
             messages=[
                 {"role": "system", "content": """You are an expert Gradio developer. 
@@ -127,6 +129,13 @@ def create_ui():
         
         with gr.Row():
             with gr.Column(scale=2):
+                api_key = gr.Textbox(
+                    label="OpenAI API Key", 
+                    placeholder="sk-...",
+                    type="password",
+                    info="Your key is used for this session only and not stored"
+                )
+                
                 prompt = gr.Textbox(
                     label="App Description", 
                     placeholder="Describe the Gradio app you want to create...",
@@ -141,30 +150,34 @@ def create_ui():
                     code_output = gr.Code(language="python", label="Generated Code")
             
             with gr.Column(scale=3):
-                output = gr.Markdown("Your generated app will appear here.")
+                output = gr.HTML("<div style='text-align: center; padding: 50px;'><h3>Your generated app will appear here</h3></div>")
                 error_output = gr.Markdown(visible=False)
         
-        def on_submit(prompt_text):
+        def on_submit(api_key_input, prompt_text):
             # Generate the Gradio app code
-            code, error = generate_gradio_app(prompt_text)
+            code, error = generate_gradio_app(api_key_input, prompt_text)
             if error:
-                return None, f"⚠️ **Error generating code**: {error}", gr.update(visible=True), None
+                return None, f"⚠️ **Error generating code**: {error}", gr.update(visible=True), gr.update(value="<div style='text-align: center; padding: 50px;'><h3>Error generating app</h3></div>")
             
             # Load and run the generated app
             app, run_error = load_and_run_gradio_app(code)
             if run_error:
-                return code, f"⚠️ **Error running the generated app**: {run_error}", gr.update(visible=True), None
+                return code, f"⚠️ **Error running the generated app**: {run_error}", gr.update(visible=True), gr.update(value="<div style='text-align: center; padding: 50px;'><h3>Error running app</h3></div>")
             
             # Create an iframe to display the app
-            iframe_html = f'<iframe src="/generated_app" width="100%" height="800px" frameborder="0"></iframe>'
+            iframe_html = f'''
+            <div style="border: 1px solid #ddd; border-radius: 8px; padding: 0; overflow: hidden;">
+                <iframe id="appFrame" src="/generated_app" width="100%" height="800px" frameborder="0"></iframe>
+            </div>
+            '''
             return code, "", gr.update(visible=False), iframe_html
         
         def on_clear():
-            return "", "", gr.update(visible=False), "Your generated app will appear here."
+            return gr.update(value=""), "", gr.update(visible=False), "<div style='text-align: center; padding: 50px;'><h3>Your generated app will appear here</h3></div>"
         
         submit_btn.click(
             on_submit, 
-            inputs=[prompt], 
+            inputs=[api_key, prompt], 
             outputs=[code_output, error_output, error_output, output]
         )
         
@@ -176,34 +189,7 @@ def create_ui():
     
     return interface
 
-# Flask routes to handle the generated app
-@app.route('/generated_app')
-def serve_generated_app():
-    """Serve the generated Gradio app"""
-    if not generated_app:
-        return "No app has been generated yet. Please create one first."
-    
-    # Create a tempfile with the current code
-    with tempfile.NamedTemporaryFile(suffix='.py', delete=False) as f:
-        f.write(current_code.encode('utf-8'))
-        temp_file = f.name
-    
-    # Execute the code in a subprocess
-    # This is a simplified version - in a real app, you'd need a more robust solution
-    import subprocess
-    result = subprocess.run([sys.executable, temp_file], capture_output=True, text=True)
-    
-    # Clean up
-    os.unlink(temp_file)
-    
-    if result.returncode != 0:
-        return f"Error running the app: {result.stderr}"
-    
-    return result.stdout
-
+# Create and launch the Gradio interface
 if __name__ == "__main__":
-    # Create the Gradio interface
     demo = create_ui()
-    
-    # Launch the Gradio app
     demo.launch(server_name="0.0.0.0", server_port=7860)