Artples commited on
Commit
ca53010
1 Parent(s): eaf1d8a

Upload 2 files

Browse files
Files changed (2) hide show
  1. app(14).py +109 -0
  2. 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