Update app.py

app.py

@@ -26,11 +26,24 @@ def generate_gradio_app(image):
         img_str = base64.b64encode(buffered.getvalue()).decode()
         
         # Prepare the prompt
-        prompt = """You are a UX/UI designer. Describe the attached screenshot or UI mockup in detail. I will feed in the output you give me to a coding model that will attempt to recreate this mockup as a Gradio app, so please think step by step and describe the UI in detail. Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly. Make sure to mention every part of the screenshot including any headers, footers, etc. Use the exact text from the screenshot. After describing the UI, suggest how this could be implemented using Gradio components."""
+        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:
+
+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.
+
+Please generate the entire Gradio code based on the provided image."""
 
         # Make the API call
         stream = client.chat.completions.create(
-            model="meta-llama/Llama-Vision-Free",
+            model="meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo",
             messages=[
                 {
                     "role": "user",
@@ -45,7 +58,7 @@ def generate_gradio_app(image):
                     ],
                 }
             ],
-            max_tokens=2048,
+            max_tokens=4096,
             temperature=0.7,
             top_p=0.7,
             top_k=50,
@@ -55,16 +68,16 @@ def generate_gradio_app(image):
         )
         
         # Collect the streamed response
-        generated_text = ""
+        generated_code = ""
         for chunk in stream:
             if chunk.choices[0].delta.content is not None:
-                generated_text += chunk.choices[0].delta.content
-                yield f"Generating... (Current length: {len(generated_text)} characters)\n\n{generated_text}"
+                generated_code += chunk.choices[0].delta.content
+                yield f"Generating Gradio code... (Current length: {len(generated_code)} characters)\n\n{generated_code}"
         
-        if not generated_text:
-            return "Error: No response generated from the model. Please try again."
+        if not generated_code:
+            return "Error: No code generated from the model. Please try again."
         
-        return generated_text
+        return generated_code
 
     except Exception as e:
         error_message = str(e)
@@ -72,21 +85,21 @@ def generate_gradio_app(image):
         return f"An error occurred: {error_message}\n\nStack trace:\n{stack_trace}\n\nPlease try again or check your API key and connection."
 
 with gr.Blocks() as demo:
-    gr.Markdown("# Analyze wireframe and suggest Gradio app layout")
-    gr.Markdown("Upload an image of your UI design for analysis and suggestions.")
+    gr.Markdown("# Generate Gradio App from Wireframe")
+    gr.Markdown("Upload an image of your UI design, and we'll generate Gradio code to recreate it.")
     
     with gr.Row():
         with gr.Column(scale=1):
             image_input = gr.Image(label="Upload a screenshot", elem_id="image_upload")
-            generate_button = gr.Button("Analyze and Suggest", variant="primary")
+            generate_button = gr.Button("Generate Gradio Code", variant="primary")
         
         with gr.Column(scale=2):
-            text_output = gr.Textbox(label="Analysis and Suggestions", lines=20)
+            code_output = gr.Code(language="python", label="Generated Gradio Code", lines=30)
     
     generate_button.click(
         fn=generate_gradio_app,
         inputs=[image_input],
-        outputs=[text_output]
+        outputs=[code_output]
     )
 
 if __name__ == "__main__":