Hugging Face's logo

Spaces:
pixeltron-smg
/
genpixel
Running

App Files Community
4
muhammad.i.fidatama commited on
Commit
a5f1771
·
1 Parent(s): eff4bbd

add application file

Browse files
Files changed (1) hide show
  1. app.py +140 -0
app.py ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+ from PIL import Image
3
+ import requests
4
+ from io import BytesIO
5
+ # import tensorflow as tf
6
+
7
+ # Function to display an example image
8
+ def display_example_image(url):
9
+ response = requests.get(url)
10
+ img = Image.open(BytesIO(response.content))
11
+ st.image(img, caption='Generated Image', use_column_width=True)
12
+
13
+ # Placeholder function for generating images (replace this with your actual generative AI code)
14
+ def generate_images(prompt, num_images=3):
15
+ # This is a placeholder function. Replace it with your actual image generation code.
16
+ # Here, we are just returning the same example image multiple times for demonstration.
17
+ image_url = "https://wpmedia.roomsketcher.com/content/uploads/2022/01/06145940/What-is-a-floor-plan-with-dimensions.png" # Replace with a valid image URL
18
+ response = requests.get(image_url)
19
+ img = Image.open(BytesIO(response.content))
20
+ return [img] * num_images
21
+
22
+
23
+ title_center = """
24
+ <style>
25
+ .title{
26
+ text-align: center
27
+ }
28
+ </style>
29
+
30
+ """
31
+ # Title of the app
32
+ st.markdown(title_center, unsafe_allow_html=True)
33
+
34
+ title_container = """
35
+ <h1 class="title">AutoFloor</h1>
36
+ """
37
+
38
+ st.markdown(title_container, unsafe_allow_html=True)
39
+ # Text input for user prompt
40
+ user_prompt = st.text_input("Enter your prompt here:")
41
+
42
+ # file= st.file_uploader ("Unggah file Gambar", type = ["jpg", "png"])
43
+
44
+ # model = tf.keras.models.load_model('L00005_HL512_bagus.h5')
45
+
46
+ st.markdown("""
47
+ <style>.element-container:has(#button-after) + div button {
48
+ margin: 0 auto;
49
+ display: block;
50
+ }</style>""", unsafe_allow_html=True)
51
+
52
+
53
+ st.markdown('<span id="button-after"></span>', unsafe_allow_html=True)
54
+ # Generate and display images in a 3x3 grid
55
+ if st.button('Generate Images', type="primary"):
56
+ if user_prompt:
57
+ st.write(f"Prompt: {user_prompt}")
58
+ image_url = "https://wpmedia.roomsketcher.com/content/uploads/2022/01/06145940/What-is-a-floor-plan-with-dimensions.png" # Replace with a valid image URL
59
+ # Generate images based on the user's prompt
60
+ generated_images = generate_images(user_prompt, num_images=3)
61
+
62
+
63
+ html_code = f"""
64
+ <!DOCTYPE html>
65
+ <html lang="en">
66
+ <head>
67
+ <meta charset="UTF-8">
68
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
69
+ <style>
70
+ .zoomable-image {{
71
+ transition: transform 0.3s ease;
72
+ cursor: pointer;
73
+ }}
74
+ </style>
75
+ <script src="https://unpkg.com/[email protected]/dist/panzoom.min.js"></script>
76
+ </head>
77
+ <body>
78
+ <div id="image-container" style="text-align: center;">
79
+ <img id="zoomable-image" class="zoomable-image" src="{image_url}" alt="Zoomable Image" style="max-width: 100%; height: auto;">
80
+ </div>
81
+ <script>
82
+ document.addEventListener('DOMContentLoaded', (event) => {{
83
+ const image = document.getElementById('zoomable-image');
84
+ const panzoomInstance = panzoom(image, {{
85
+ maxZoom: 3,
86
+ minZoom: 1,
87
+ bounds: false,
88
+ boundsPadding: 0.1
89
+ }});
90
+
91
+ image.addEventListener('click', () => {{
92
+ const currentTransform = image.style.transform;
93
+ if (currentTransform.includes('matrix')) {{
94
+ panzoomInstance.zoomAbs(0, 0, 1);
95
+ }} else {{
96
+ panzoomInstance.zoomAbs(image.width / 2, image.height / 2, 3);
97
+ }}
98
+ }});
99
+
100
+ image.addEventListener('dblclick', () => {{
101
+ const xys = panzoomInstance.getTransform()
102
+ if(xys.scale > 1) {{
103
+ const fScale = 1 - xys.scale
104
+ const fixeX = xys.x / fScale
105
+ const fixeY = xys.y / fScale
106
+ panzoomInstance.smoothZoomAbs(fixeX, fixeY, 1)
107
+ }} else {{
108
+ panzoomInstance.moveBy(-xys.x, -xys.y, true)
109
+ panzoomInstance.smoothZoomAbs(xys.x, xys.y, 1)
110
+ }}
111
+ panzoomInstance.moveTo(0, 0)
112
+ panzoomInstance.zoomAbs(0, 0, 1)
113
+ }});
114
+ }});
115
+ </script>
116
+ </body>
117
+ </html>
118
+ """
119
+
120
+ # # Embed the HTML and JavaScript into the Streamlit app
121
+ # st.components.v1.html(html_code, height=300)
122
+
123
+
124
+ # Display images in a 3x3 grid
125
+ cols = st.columns(3)
126
+ for i in range(3):
127
+ # for j in range(3):
128
+ # with cols[j]:
129
+ # st.image(generated_images[i * 3 + j], use_column_width=True)
130
+
131
+ # Display the image with zoom effect
132
+ # container_style = """
133
+ # <div class="container">
134
+ # <img class="zoom" src="{}" style="width:100%;">
135
+ # </div>
136
+ # """.format(image_url)
137
+ # st.markdown(container_style, unsafe_allow_html=True)
138
+ st.components.v1.html(html_code, height=600)
139
+ else:
140
+ st.write("Please enter a prompt.")