Spaces:
Running
Running
Upload 2 files
Browse files- app(14).py +109 -0
- requirements(3).txt +3 -0
app(14).py
ADDED
@@ -0,0 +1,109 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import streamlit as st
|
2 |
+
import pathlib
|
3 |
+
from PIL import Image
|
4 |
+
import google.generativeai as genai
|
5 |
+
|
6 |
+
# Configure the API key directly in the script
|
7 |
+
API_KEY = 'YOUR KEY'
|
8 |
+
genai.configure(api_key=API_KEY)
|
9 |
+
|
10 |
+
# Generation configuration
|
11 |
+
generation_config = {
|
12 |
+
"temperature": 1,
|
13 |
+
"top_p": 0.95,
|
14 |
+
"top_k": 64,
|
15 |
+
"max_output_tokens": 8192,
|
16 |
+
"response_mime_type": "text/plain",
|
17 |
+
}
|
18 |
+
|
19 |
+
# Safety settings
|
20 |
+
safety_settings = [
|
21 |
+
{"category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_NONE"},
|
22 |
+
{"category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_NONE"},
|
23 |
+
{"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_NONE"},
|
24 |
+
{"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_NONE"},
|
25 |
+
]
|
26 |
+
|
27 |
+
# Model name
|
28 |
+
MODEL_NAME = "gemini-1.5-pro-latest"
|
29 |
+
|
30 |
+
# Framework selection (e.g., Tailwind, Bootstrap, etc.)
|
31 |
+
framework = "Regular CSS use flex grid etc" # Change this to "Bootstrap" or any other framework as needed
|
32 |
+
|
33 |
+
# Create the model
|
34 |
+
model = genai.GenerativeModel(
|
35 |
+
model_name=MODEL_NAME,
|
36 |
+
safety_settings=safety_settings,
|
37 |
+
generation_config=generation_config,
|
38 |
+
)
|
39 |
+
|
40 |
+
# Start a chat session
|
41 |
+
chat_session = model.start_chat(history=[])
|
42 |
+
|
43 |
+
# Function to send a message to the model
|
44 |
+
def send_message_to_model(message, image_path):
|
45 |
+
image_input = {
|
46 |
+
'mime_type': 'image/jpeg',
|
47 |
+
'data': pathlib.Path(image_path).read_bytes()
|
48 |
+
}
|
49 |
+
response = chat_session.send_message([message, image_input])
|
50 |
+
return response.text
|
51 |
+
|
52 |
+
# Streamlit app
|
53 |
+
def main():
|
54 |
+
st.title("Gemini 1.5 Pro, UI to Code 👨💻 ")
|
55 |
+
st.subheader('Made with ❤️ by [Skirano](https://x.com/skirano)')
|
56 |
+
|
57 |
+
uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])
|
58 |
+
|
59 |
+
if uploaded_file is not None:
|
60 |
+
try:
|
61 |
+
# Load and display the image
|
62 |
+
image = Image.open(uploaded_file)
|
63 |
+
st.image(image, caption='Uploaded Image.', use_column_width=True)
|
64 |
+
|
65 |
+
# Convert image to RGB mode if it has an alpha channel
|
66 |
+
if image.mode == 'RGBA':
|
67 |
+
image = image.convert('RGB')
|
68 |
+
|
69 |
+
# Save the uploaded image temporarily
|
70 |
+
temp_image_path = pathlib.Path("temp_image.jpg")
|
71 |
+
image.save(temp_image_path, format="JPEG")
|
72 |
+
|
73 |
+
# Generate UI description
|
74 |
+
if st.button("Code UI"):
|
75 |
+
st.write("🧑💻 Looking at your UI...")
|
76 |
+
prompt = "Describe this UI in accurate details. When you reference a UI element put its name and bounding box in the format: [object name (y_min, x_min, y_max, x_max)]. Also Describe the color of the elements."
|
77 |
+
description = send_message_to_model(prompt, temp_image_path)
|
78 |
+
st.write(description)
|
79 |
+
|
80 |
+
# Refine the description
|
81 |
+
st.write("🔍 Refining description with visual comparison...")
|
82 |
+
refine_prompt = f"Compare the described UI elements with the provided image and identify any missing elements or inaccuracies. Also Describe the color of the elements. Provide a refined and accurate description of the UI elements based on this comparison. Here is the initial description: {description}"
|
83 |
+
refined_description = send_message_to_model(refine_prompt, temp_image_path)
|
84 |
+
st.write(refined_description)
|
85 |
+
|
86 |
+
# Generate HTML
|
87 |
+
st.write("🛠️ Generating website...")
|
88 |
+
html_prompt = f"Create an HTML file based on the following UI description, using the UI elements described in the previous response. Include {framework} CSS within the HTML file to style the elements. Make sure the colors used are the same as the original UI. The UI needs to be responsive and mobile-first, matching the original UI as closely as possible. Do not include any explanations or comments. Avoid using ```html. and ``` at the end. ONLY return the HTML code with inline CSS. Here is the refined description: {refined_description}"
|
89 |
+
initial_html = send_message_to_model(html_prompt, temp_image_path)
|
90 |
+
st.code(initial_html, language='html')
|
91 |
+
|
92 |
+
# Refine HTML
|
93 |
+
st.write("🔧 Refining website...")
|
94 |
+
refine_html_prompt = f"Validate the following HTML code based on the UI description and image and provide a refined version of the HTML code with {framework} CSS that improves accuracy, responsiveness, and adherence to the original design. ONLY return the refined HTML code with inline CSS. Avoid using ```html. and ``` at the end. Here is the initial HTML: {initial_html}"
|
95 |
+
refined_html = send_message_to_model(refine_html_prompt, temp_image_path)
|
96 |
+
st.code(refined_html, language='html')
|
97 |
+
|
98 |
+
# Save the refined HTML to a file
|
99 |
+
with open("index.html", "w") as file:
|
100 |
+
file.write(refined_html)
|
101 |
+
st.success("HTML file 'index.html' has been created.")
|
102 |
+
|
103 |
+
# Provide download link for HTML
|
104 |
+
st.download_button(label="Download HTML", data=refined_html, file_name="index.html", mime="text/html")
|
105 |
+
except Exception as e:
|
106 |
+
st.error(f"An error occurred: {e}")
|
107 |
+
|
108 |
+
if __name__ == "__main__":
|
109 |
+
main()
|
requirements(3).txt
ADDED
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
1 |
+
streamlit
|
2 |
+
Pillow
|
3 |
+
google-generativeai
|