Update app.py

app.py

@@ -5,7 +5,6 @@ from io import BytesIO
 from PIL import Image
 import numpy as np
 import traceback
-import json
 
 def generate_gradio_app(api_key, image):
     if not api_key:
@@ -25,20 +24,19 @@ def generate_gradio_app(api_key, image):
         img_str = base64.b64encode(buffered.getvalue()).decode()
         
         # Prepare the prompt
-        prompt = """You are an AI assistant specialized in UI/UX design and Gradio app development. Analyze the attached screenshot or UI mockup and generate a complete Gradio code that recreates this design. Follow these steps:
+        prompt = """You are an AI assistant specialized in UI/UX design and Gradio app development. Analyze the attached screenshot or UI mockup and generate a concise Gradio code that recreates the main elements of this design. Follow these steps:
 
-1. Describe the main elements of the UI, including layout, colors, and components.
-2. Generate a complete Gradio Python code that recreates this UI as closely as possible.
-3. Use appropriate Gradio components for each element in the UI.
-4. Include all necessary imports at the beginning of the code.
-5. Implement placeholder functions for any interactive elements (buttons, inputs, etc.).
-6. Use gr.Blocks() to create a layout that matches the screenshot.
-7. Add appropriate labels and descriptions for all components.
-8. Include the gr.Blocks().launch() call at the end of the code.
-9. Provide a complete, runnable Gradio application that can be executed as-is.
-10. Add comments explaining the purpose of each major section or component.
+1. Briefly describe the main elements of the UI.
+2. Generate a compact Gradio Python code that recreates the essential UI elements.
+3. Use appropriate Gradio components for key elements in the UI.
+4. Include necessary imports at the beginning of the code.
+5. Implement minimal placeholder functions for interactive elements.
+6. Use gr.Blocks() to create a basic layout that captures the essence of the screenshot.
+7. Include the gr.Blocks().launch() call at the end of the code.
+8. Provide a runnable Gradio application focusing on the most important aspects of the UI.
+9. Keep the code concise, aiming for no more than 1000 tokens.
 
-Please generate the entire Gradio code based on the provided image."""
+Please generate the Gradio code based on the provided image, focusing on the most crucial elements to fit within the token limit."""
 
         # Make the API call with the corrected message format
         response = client.chat.completions.create(
@@ -49,7 +47,7 @@ Please generate the entire Gradio code based on the provided image."""
                     "content": prompt + f"\n\n<image>\ndata:image/png;base64,{img_str}\n</image>"
                 }
             ],
-            max_tokens=4096,
+            max_tokens=1000,
             temperature=0.7,
             top_p=0.7,
             top_k=50,
@@ -58,8 +56,9 @@ Please generate the entire Gradio code based on the provided image."""
             stream=False
         )
         
-        # Debug: Print the entire response
-        print("API Response:", json.dumps(response, indent=2))
+        # Debug: Print relevant parts of the response
+        print("API Response Status:", response.status_code)
+        print("API Response Choices:", response.choices)
 
         # Extract the generated code from the response
         if response.choices and response.choices[0].message:
@@ -78,8 +77,8 @@ Please generate the entire Gradio code based on the provided image."""
         return f"An error occurred: {error_message}\n\nStack trace:\n{stack_trace}\n\nPlease check your API key and try again."
 
 with gr.Blocks() as demo:
-    gr.Markdown("# Generate Gradio App from Wireframe")
-    gr.Markdown("Enter your Together API key, upload an image of your UI design, and we'll generate Gradio code to recreate it.")
+    gr.Markdown("# Generate Concise Gradio App from Wireframe")
+    gr.Markdown("Enter your Together API key, upload an image of your UI design, and we'll generate a compact Gradio code to recreate its main elements.")
     
     api_key_input = gr.Textbox(label="Enter your Together API Key", type="password")