Initial commit

.env

@@ -0,0 +1 @@
+export GOOGLE_API_KEY=AIzaSyCFUjGZANPs5kLFN6BUfpwP9xbDwUCwNvo

README.md

@@ -0,0 +1,9 @@
+title: Gemini UI Generator
+emoji: 💻
+colorFrom: blue
+colorTo: gray
+sdk: streamlit
+app_file: app.py
+pinned: false
+license: apache-2.0
+short_description: Text-to-UI - Thanks to Pietro Schirano for the Repository!

app.py

@@ -0,0 +1,124 @@
+import os
+import streamlit as st
+import pathlib
+from PIL import Image
+import google.generativeai as genai
+from dotenv import load_dotenv
+load_dotenv()
+
+# Configure the API key directly in the script
+API_KEY = os.environ.get("GOOGLE_API_KEY")
+genai.configure(api_key=API_KEY)
+
+# Generation configuration
+generation_config = {
+    "temperature": 0.8,
+    "top_p": 0.95,
+    "top_k": 64,
+    "max_output_tokens": 50000,
+    "response_mime_type": "text/plain",
+}
+
+# Safety settings
+safety_settings = [
+    {"category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_NONE"},
+    {"category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_NONE"},
+    {"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_NONE"},
+    {"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_NONE"},
+]
+
+# Model name
+MODEL_NAME = "gemini-1.5-flash-latest"
+
+# Framework selection (e.g., Tailwind, Bootstrap, etc.)
+framework = "Regular CSS use flex grid etc"  # Change this to "Bootstrap" or any other framework as needed
+
+# Create the model
+model = genai.GenerativeModel(
+    model_name=MODEL_NAME,
+    safety_settings=safety_settings,
+    generation_config=generation_config,
+)
+
+# Start a chat session
+chat_session = model.start_chat(history=[])
+
+# Function to send a message to the model
+def send_message_to_model(message, image_path):
+    image_input = {
+        'mime_type': 'image/jpeg',
+        'data': pathlib.Path(image_path).read_bytes()
+    }
+    response = chat_session.send_message([message, image_input])
+    return response.text
+
+# Streamlit app
+def main():
+    st.title("Image to HTML Code AI 👨‍💻 ")
+    st.subheader('Made by [Pushpendra](https://github.com/pushparmar).')
+
+    uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])
+
+    if uploaded_file is not None:
+        try:
+            # Load and display the image
+            image = Image.open(uploaded_file)
+            st.image(image, caption='Uploaded Image.', use_container_width=True)
+
+            # Convert image to RGB mode if it has an alpha channel
+            if image.mode == 'RGBA':
+                image = image.convert('RGB')
+
+            # Save the uploaded image temporarily
+            temp_image_path = pathlib.Path("temp_image.jpg")
+            image.save(temp_image_path, format="JPEG")
+            styleframework = st.selectbox("Select CSS Framework", ["Regular CSS use flex grid etc", "Bootstrap (Disabled)", "Tailwind (Disabled)"])
+            uiFrameWork = st.selectbox("Select UI Framework", ["Regular HTML Code", "React.js (Disabled)", "Angular.js (Disabled)", "Vue.js (Disabled)"])
+
+            # Generate UI description
+            if st.button("Code UI"):
+                placeholder = st.empty()
+                placeholder.write("🧑‍💻 A parmar code agent is Looking at your UI...")
+
+               
+                import time
+                time.sleep(4)
+                st.write("🧑‍💻 A parmar code agent Generating Code for your image")
+                import time
+                time.sleep(2)
+                detailed_prompt = f"""
+                Analyze the uploaded image and generate a detailed {uiFrameWork} file with inline CSS that accurately represents the UI. 
+                - Identify all UI elements (e.g., buttons, text fields, images, etc.) and their bounding boxes in the format: [object name (y_min, x_min, y_max, x_max)].
+                - Describe the color, font, and styling of each element.
+                - Ensure the {uiFrameWork} code is responsive and mobile-first, using {styleframework} CSS for layout and styling.
+                - If {uiFrameWork} is selected, generate components with selected framework syntax and include inline CSS for styling.
+                - Include detailed inline CSS for each element to match the original design as closely as possible.
+                - Avoid using external libraries or frameworks unless specified.
+                - Do not include explanations or comments in the code.
+                - ONLY return the {uiFrameWork} code with inline CSS.
+                """
+
+                if "Disabled" in uiFrameWork or "Disabled" in styleframework:
+                    st.warning("This option is currently unavailable.")
+                    return
+                else:
+                    st.write(f"You selected: {uiFrameWork}")
+                
+                    generated_html = send_message_to_model(detailed_prompt, temp_image_path)
+                    st.code(generated_html, language='html')
+
+                    # Save the refined HTML to a file
+                    with open("index.html", "w") as file:
+                        file.write(generated_html)
+                    st.success("HTML file 'index.html' has been created.")
+
+                    # Provide download link for HTML
+                    st.download_button(label="Download HTML", data=generated_html, file_name="index.html", mime="text/html")
+
+                    # Provide a link to open the HTML file in a new tab
+                    st.markdown(f'<a href="index.html" target="_blank">Open HTML in a new tab</a>', unsafe_allow_html=True)
+        except Exception as e:
+            st.error(f"An error occurred: {e}")
+
+if __name__ == "__main__":
+    main()

index.html

@@ -0,0 +1,141 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Growform</title>
+<style>
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f8f9fa;
+}
+.container {
+  max-width: 600px;
+  margin: 50px auto;
+  background-color: #fff;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.logo {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.logo img {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+.logo span {
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: #343a40;
+}
+.khoros-logo {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.khoros-logo img {
+  height: 30px;
+}
+.khoros-logo span {
+  font-size: 24px;
+  color: #2862d6;
+  font-weight: bold;
+}
+.progress-bar {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+}
+.progress-bar circle {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid #ced4da;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #343a40;
+  background-color: #fff;
+}
+.progress-bar line {
+  height: 1px;
+  background-color: #ced4da;
+}
+.progress-bar circle.active {
+  background-color: #e94590;
+  color: #fff;
+  border: none;
+}
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #343a40;
+}
+input[type="email"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+.button {
+  width: 100%;
+  background-color: #e94590;
+  color: #fff;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.footer {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 12px;
+  color: #868e96;
+}
+.footer a {
+  color: #868e96;
+  text-decoration: none;
+  margin: 0 5px;
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="logo">
+    <img src="growform-logo.svg" alt="Growform Logo">
+    <span>Growform</span>
+  </div>
+  <div class="khoros-logo">
+    <img src="khoros-logo.svg" alt="Khoros Logo">
+    <span>Khoros</span>
+  </div>
+  <p style="text-align:center;margin-bottom:20px;font-size:16px;color:#343a40;">Are you ready for a demo?</p>
+    <div class="progress-bar">
+    <div class="circle active">1</div>
+    <div style="width: 25%;"></div>
+    <div class="circle">2</div>
+    <div style="width: 25%;"></div>
+    <div class="circle">3</div>
+    </div>
+  <p style="text-align: center; font-size: 16px; color: #343a40; margin-bottom: 20px;">Let's get started.</p>
+  <label for="work-email" style="margin-left: 5px;">Work email:</label>
+  <input type="email" id="work-email" style="margin-left:5px;">
+  <button class="button" style="margin-left:5px;">NEXT</button>
+  <div class="footer">
+    © Khoros, LLC | <a href="#">Privacy</a> | <a href="#">Security</a> | <a href="#">Disclaimer</a> | <a href="#">Legal & Compliance</a> | <a href="#">Terms of Use</a>
+  </div>
+</div>
+</body>
+</html>
+```

requirements.txt

@@ -0,0 +1,2 @@
+Pillow
+google-generativeai