Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -1,30 +1,47 @@
|
|
1 |
import gradio as gr
|
|
|
|
|
|
|
2 |
from together import Together
|
3 |
import base64
|
4 |
from io import BytesIO
|
5 |
-
from PIL import Image
|
6 |
import numpy as np
|
7 |
import traceback
|
8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
9 |
|
10 |
def generate_gradio_app(api_key, image):
|
11 |
if not api_key:
|
12 |
return "Error: API key not provided. Please enter your Together API key."
|
13 |
|
14 |
try:
|
15 |
-
|
16 |
-
client = Together(api_key=api_key)
|
17 |
|
18 |
-
|
19 |
-
if isinstance(image, np.ndarray):
|
20 |
-
image = Image.fromarray(image.astype('uint8'), 'RGB')
|
21 |
|
22 |
-
# Convert the image to base64
|
23 |
-
buffered = BytesIO()
|
24 |
-
image.save(buffered, format="PNG")
|
25 |
-
img_str = base64.b64encode(buffered.getvalue()).decode()
|
26 |
-
|
27 |
-
# Prepare the prompt
|
28 |
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:
|
29 |
|
30 |
1. Briefly describe the main elements of the UI.
|
@@ -39,58 +56,39 @@ def generate_gradio_app(api_key, image):
|
|
39 |
|
40 |
Please generate the Gradio code based on the provided image, focusing on the most crucial elements to fit within the token limit."""
|
41 |
|
42 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
response = client.chat.completions.create(
|
44 |
model="meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo",
|
45 |
-
messages=
|
46 |
-
{
|
47 |
-
"role": "user",
|
48 |
-
"content": prompt + f"\n\n<image>\ndata:image/png;base64,{img_str}\n</image>"
|
49 |
-
}
|
50 |
-
],
|
51 |
max_tokens=2000,
|
52 |
temperature=0.7,
|
53 |
top_p=0.7,
|
54 |
top_k=50,
|
55 |
repetition_penalty=1,
|
56 |
-
stop=["<|eot_id|>", "<|eom_id|>"]
|
57 |
-
stream=False
|
58 |
)
|
59 |
-
|
60 |
-
# Debug: Print relevant parts of the response
|
61 |
-
print("API Response received. Content available:", bool(response.choices))
|
62 |
|
63 |
-
# Extract the generated code from the response
|
64 |
if response.choices and response.choices[0].message:
|
65 |
generated_code = response.choices[0].message.content
|
66 |
print("Generated code length:", len(generated_code))
|
|
|
67 |
else:
|
68 |
return "Error: Unexpected response structure from the API."
|
69 |
-
|
70 |
-
if not generated_code:
|
71 |
-
return "Error: No code generated from the model. Please try again."
|
72 |
-
|
73 |
-
return generated_code
|
74 |
|
75 |
except Exception as e:
|
76 |
error_message = str(e)
|
77 |
stack_trace = traceback.format_exc()
|
78 |
-
|
79 |
-
# Check if the error is related to the API response
|
80 |
-
if "TogetherErrorResponse" in error_message:
|
81 |
-
try:
|
82 |
-
# Try to parse the error message as JSON
|
83 |
-
error_data = json.loads(error_message.split("TogetherErrorResponse")[-1].strip())
|
84 |
-
if isinstance(error_data.get('code'), int):
|
85 |
-
error_data['code'] = str(error_data['code']) # Convert code to string
|
86 |
-
error_message = f"API Error: {error_data.get('message', 'Unknown error')}"
|
87 |
-
except json.JSONDecodeError:
|
88 |
-
# If parsing fails, use the original error message
|
89 |
-
pass
|
90 |
-
|
91 |
return f"An error occurred: {error_message}\n\nStack trace:\n{stack_trace}\n\nPlease check your API key and try again."
|
92 |
|
93 |
-
# The rest of your code remains the same
|
94 |
with gr.Blocks() as demo:
|
95 |
gr.Markdown("# Generate Concise Gradio App from Wireframe")
|
96 |
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.")
|
|
|
1 |
import gradio as gr
|
2 |
+
from PIL import Image
|
3 |
+
import requests
|
4 |
+
import os
|
5 |
from together import Together
|
6 |
import base64
|
7 |
from io import BytesIO
|
|
|
8 |
import numpy as np
|
9 |
import traceback
|
10 |
+
|
11 |
+
# Initialize Together client
|
12 |
+
client = None
|
13 |
+
|
14 |
+
def initialize_client(api_key=None):
|
15 |
+
global client
|
16 |
+
if api_key:
|
17 |
+
client = Together(api_key=api_key)
|
18 |
+
elif "TOGETHER_API_KEY" in os.environ:
|
19 |
+
client = Together()
|
20 |
+
else:
|
21 |
+
raise ValueError("Please provide an API key or set the TOGETHER_API_KEY environment variable")
|
22 |
+
|
23 |
+
def encode_image(image, max_size=(800, 800), quality=85):
|
24 |
+
if isinstance(image, np.ndarray):
|
25 |
+
image = Image.fromarray(image.astype('uint8'), 'RGB')
|
26 |
+
|
27 |
+
image.thumbnail(max_size)
|
28 |
+
if image.mode in ('RGBA', 'LA'):
|
29 |
+
background = Image.new(image.mode[:-1], image.size, (255, 255, 255))
|
30 |
+
background.paste(image, mask=image.split()[-1])
|
31 |
+
image = background
|
32 |
+
buffered = BytesIO()
|
33 |
+
image.save(buffered, format="JPEG", quality=quality)
|
34 |
+
return base64.b64encode(buffered.getvalue()).decode('utf-8')
|
35 |
|
36 |
def generate_gradio_app(api_key, image):
|
37 |
if not api_key:
|
38 |
return "Error: API key not provided. Please enter your Together API key."
|
39 |
|
40 |
try:
|
41 |
+
initialize_client(api_key)
|
|
|
42 |
|
43 |
+
encoded_image = encode_image(image)
|
|
|
|
|
44 |
|
|
|
|
|
|
|
|
|
|
|
|
|
45 |
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:
|
46 |
|
47 |
1. Briefly describe the main elements of the UI.
|
|
|
56 |
|
57 |
Please generate the Gradio code based on the provided image, focusing on the most crucial elements to fit within the token limit."""
|
58 |
|
59 |
+
messages = [
|
60 |
+
{
|
61 |
+
"role": "user",
|
62 |
+
"content": [
|
63 |
+
{"type": "text", "text": prompt},
|
64 |
+
{"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{encoded_image}"}}
|
65 |
+
]
|
66 |
+
}
|
67 |
+
]
|
68 |
+
|
69 |
response = client.chat.completions.create(
|
70 |
model="meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo",
|
71 |
+
messages=messages,
|
|
|
|
|
|
|
|
|
|
|
72 |
max_tokens=2000,
|
73 |
temperature=0.7,
|
74 |
top_p=0.7,
|
75 |
top_k=50,
|
76 |
repetition_penalty=1,
|
77 |
+
stop=["<|eot_id|>", "<|eom_id|>"]
|
|
|
78 |
)
|
|
|
|
|
|
|
79 |
|
|
|
80 |
if response.choices and response.choices[0].message:
|
81 |
generated_code = response.choices[0].message.content
|
82 |
print("Generated code length:", len(generated_code))
|
83 |
+
return generated_code
|
84 |
else:
|
85 |
return "Error: Unexpected response structure from the API."
|
|
|
|
|
|
|
|
|
|
|
86 |
|
87 |
except Exception as e:
|
88 |
error_message = str(e)
|
89 |
stack_trace = traceback.format_exc()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
90 |
return f"An error occurred: {error_message}\n\nStack trace:\n{stack_trace}\n\nPlease check your API key and try again."
|
91 |
|
|
|
92 |
with gr.Blocks() as demo:
|
93 |
gr.Markdown("# Generate Concise Gradio App from Wireframe")
|
94 |
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.")
|