app.py

import gradio as gr
from together import Together
import base64
from io import BytesIO
from PIL import Image
import numpy as np
import traceback

def generate_gradio_app(api_key, image):
    if not api_key:
        return "Error: API key not provided. Please enter your Together API key."

    try:
        # Initialize the Together client with the provided API key
        client = Together(api_key=api_key)

        # Convert numpy array to PIL Image
        if isinstance(image, np.ndarray):
            image = Image.fromarray(image.astype('uint8'), 'RGB')
        
        # Convert the image to base64
        buffered = BytesIO()
        image.save(buffered, format="PNG")
        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:

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-3.2-90B-Vision-Instruct-Turbo",
            messages=[
                {
                    "role": "user",
                    "content": [
                        {"type": "text", "text": prompt},
                        {
                            "type": "image_url",
                            "image_url": {
                                "url": f"data:image/png;base64,{img_str}",
                            },
                        },
                    ],
                }
            ],
            max_tokens=4096,
            temperature=0.7,
            top_p=0.7,
            top_k=50,
            repetition_penalty=1,
            stop=["<|eot_id|>", "<|eom_id|>"],
            stream=True
        )
        
        # Collect the streamed response
        generated_code = ""
        for chunk in stream:
            if chunk.choices[0].delta.content is not None:
                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_code:
            return "Error: No code generated from the model. Please try again."
        
        return generated_code

    except Exception as e:
        error_message = str(e)
        stack_trace = traceback.format_exc()
        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.")
    
    api_key_input = gr.Textbox(label="Enter your Together API Key", type="password")
    
    with gr.Row():
        with gr.Column(scale=1):
            image_input = gr.Image(label="Upload a screenshot", elem_id="image_upload")
            generate_button = gr.Button("Generate Gradio Code", variant="primary")
        
        with gr.Column(scale=2):
            code_output = gr.Code(language="python", label="Generated Gradio Code", lines=30)
    
    generate_button.click(
        fn=generate_gradio_app,
        inputs=[api_key_input, image_input],
        outputs=[code_output]
    )

if __name__ == "__main__":
    demo.launch(debug=True)