Spaces:
Sleeping
Sleeping
drakosfire
commited on
Commit
•
8333c17
1
Parent(s):
d5fb696
Finished store properties block, updated textresizing into function initializeTextareaResizing and it runs after initial load, drop, drop to trash, and reset.
Browse files- app.py +4 -1
- block_builder.py +55 -40
- sd_generator.py +14 -30
- storeUI.html +31 -21
app.py
CHANGED
@@ -41,7 +41,10 @@ def process_description():
|
|
41 |
@app.route('/generate-image', methods=['POST'])
|
42 |
def generate_image():
|
43 |
data = request.get_json()
|
|
|
44 |
sd_prompt = data.get('sd_prompt')
|
|
|
|
|
45 |
if not sd_prompt:
|
46 |
return jsonify({'error': 'Missing sd_prompt'}), 400
|
47 |
image_subject = data.get('image_subject')
|
@@ -49,7 +52,7 @@ def generate_image():
|
|
49 |
return jsonify({'error': 'Missing sd_prompt'}), 400
|
50 |
|
51 |
try:
|
52 |
-
image_url = sd.preview_and_generate_image(image_subject, sd_prompt)
|
53 |
return jsonify({'image_url': image_url})
|
54 |
except Exception as e:
|
55 |
return jsonify({'error': str(e)}), 500
|
|
|
41 |
@app.route('/generate-image', methods=['POST'])
|
42 |
def generate_image():
|
43 |
data = request.get_json()
|
44 |
+
image_subject = data.get('store_name')
|
45 |
sd_prompt = data.get('sd_prompt')
|
46 |
+
image_subject_name = data.get('store_front_sd_prompt')
|
47 |
+
|
48 |
if not sd_prompt:
|
49 |
return jsonify({'error': 'Missing sd_prompt'}), 400
|
50 |
image_subject = data.get('image_subject')
|
|
|
52 |
return jsonify({'error': 'Missing sd_prompt'}), 400
|
53 |
|
54 |
try:
|
55 |
+
image_url = sd.preview_and_generate_image(image_subject,image_subject_name, sd_prompt)
|
56 |
return jsonify({'image_url': image_url})
|
57 |
except Exception as e:
|
58 |
return jsonify({'error': str(e)}), 500
|
block_builder.py
CHANGED
@@ -64,7 +64,8 @@ def build_store_properties_block(store_type,
|
|
64 |
store_reputation,
|
65 |
store_rumors,
|
66 |
block_id):
|
67 |
-
|
|
|
68 |
<div class="block-item" data-block-id="{block_id}">
|
69 |
<div class="block classTable frame decoration">
|
70 |
<table>
|
@@ -78,83 +79,97 @@ def build_store_properties_block(store_type,
|
|
78 |
<tbody>
|
79 |
<tr>
|
80 |
<td align="left"><strong>Size</strong></td>
|
81 |
-
<td align="right"><textarea class="string-
|
82 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-size-{block_id}t" hx-swap="outerHTML"
|
83 |
title="Store Size">{store_size}</textarea></td>
|
84 |
</tr>
|
85 |
<tr>
|
86 |
<td align="left"><strong>Town</strong></td>
|
87 |
-
<td align="right"><textarea class="string-
|
88 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-town-{block_id}t" hx-swap="outerHTML"
|
89 |
title="Store Size">{store_location['town']}</textarea></td>
|
90 |
</tr>
|
91 |
<tr>
|
92 |
<td align="left"><strong>District</strong></td>
|
93 |
-
<td align="right"><textarea class="string-
|
94 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-district-{block_id}t" hx-swap="outerHTML"
|
95 |
title="Store Size">{store_location['district']}</textarea></</td>
|
96 |
</tr>
|
97 |
<tr>
|
98 |
<td align="left"><strong>Street</strong></td>
|
99 |
-
<td align="right"><textarea class="string-
|
100 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-street-{block_id}t" hx-swap="outerHTML"
|
101 |
title="Store Size">{store_location['street']}</textarea></</td>
|
102 |
</tr>
|
103 |
<tr>
|
104 |
<td align="left"><strong>Type</strong></td>
|
105 |
-
<td align="right"><textarea class="string-
|
106 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-type-{block_id}t" hx-swap="outerHTML"
|
107 |
title="Store Size">{store_type}</textarea></</td>
|
108 |
</tr>
|
109 |
<tr>
|
110 |
-
|
111 |
-
<td align="right"><textarea class="string-stat-textarea" id="user-store-owners-{block_id}"
|
112 |
-
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-{block_id}t" hx-swap="outerHTML"
|
113 |
-
title="Store Size">{store_owners[0]['name']}</textarea></td>
|
114 |
-
</tr>
|
115 |
-
<tr>
|
116 |
-
<td align="left"><strong>Store Employees</strong></td>
|
117 |
-
<td align="right"><textarea class="string-stat-textarea" id="user-store-employees-{block_id}"
|
118 |
-
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employees-{block_id}t" hx-swap="outerHTML"
|
119 |
-
title="Store Size">{store_employees[0]['name']}</textarea></td>
|
120 |
-
</tr>
|
121 |
-
<tr>
|
122 |
<td align="left"><strong>Store Hours</strong></td>
|
123 |
-
<td align="right"><textarea class="string-
|
124 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-hours-{block_id}t" hx-swap="outerHTML"
|
125 |
title="Store Size">{store_hours}</textarea></td>
|
126 |
-
</tr>
|
127 |
-
|
128 |
-
|
129 |
-
|
130 |
-
|
131 |
-
|
132 |
-
|
133 |
-
|
134 |
-
<td align="left"><strong>
|
135 |
-
<td align="right"><textarea class="string-
|
136 |
-
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-
|
137 |
-
title="Store Size">{
|
138 |
-
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
139 |
<tr>
|
140 |
<td align="left"><strong>Store Reputation</strong></td>
|
141 |
-
<td align="right"><textarea class="string-
|
142 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-reputation-{block_id}t" hx-swap="outerHTML"
|
143 |
title="Store Size">{store_reputation}</textarea></td>
|
144 |
</tr>
|
145 |
-
<tr>
|
146 |
-
<td align="left"><strong>Store Rumors</strong></td>
|
147 |
-
<td align="right"><textarea class="string-stat-textarea" id="user-store-rumors-{block_id}"
|
148 |
-
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-rumors-{block_id}t" hx-swap="outerHTML"
|
149 |
-
title="Store Size">{store_rumors}</textarea></td>
|
150 |
-
</tr>
|
151 |
</tbody>
|
152 |
</table>
|
153 |
</div>
|
154 |
</div>
|
155 |
"""
|
156 |
-
|
|
|
|
|
157 |
return store_properties_block_html
|
|
|
158 |
def list_names_to_str(data):
|
159 |
list_of_names = []
|
160 |
for i in data:
|
|
|
64 |
store_reputation,
|
65 |
store_rumors,
|
66 |
block_id):
|
67 |
+
|
68 |
+
store_properties_base_html = f"""
|
69 |
<div class="block-item" data-block-id="{block_id}">
|
70 |
<div class="block classTable frame decoration">
|
71 |
<table>
|
|
|
79 |
<tbody>
|
80 |
<tr>
|
81 |
<td align="left"><strong>Size</strong></td>
|
82 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-size-{block_id}"
|
83 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-size-{block_id}t" hx-swap="outerHTML"
|
84 |
title="Store Size">{store_size}</textarea></td>
|
85 |
</tr>
|
86 |
<tr>
|
87 |
<td align="left"><strong>Town</strong></td>
|
88 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-town-{block_id}"
|
89 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-town-{block_id}t" hx-swap="outerHTML"
|
90 |
title="Store Size">{store_location['town']}</textarea></td>
|
91 |
</tr>
|
92 |
<tr>
|
93 |
<td align="left"><strong>District</strong></td>
|
94 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-district-{block_id}"
|
95 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-district-{block_id}t" hx-swap="outerHTML"
|
96 |
title="Store Size">{store_location['district']}</textarea></</td>
|
97 |
</tr>
|
98 |
<tr>
|
99 |
<td align="left"><strong>Street</strong></td>
|
100 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-street-{block_id}"
|
101 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-street-{block_id}t" hx-swap="outerHTML"
|
102 |
title="Store Size">{store_location['street']}</textarea></</td>
|
103 |
</tr>
|
104 |
<tr>
|
105 |
<td align="left"><strong>Type</strong></td>
|
106 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-type-{block_id}"
|
107 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-type-{block_id}t" hx-swap="outerHTML"
|
108 |
title="Store Size">{store_type}</textarea></</td>
|
109 |
</tr>
|
110 |
<tr>
|
111 |
+
<tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
112 |
<td align="left"><strong>Store Hours</strong></td>
|
113 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-hours-{block_id}"
|
114 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-hours-{block_id}t" hx-swap="outerHTML"
|
115 |
title="Store Size">{store_hours}</textarea></td>
|
116 |
+
</tr> """
|
117 |
+
store_owners = []
|
118 |
+
store_employees = []
|
119 |
+
|
120 |
+
def process_iterable_into_html(iterable_type, iterable, block_id):
|
121 |
+
iterable_html = f""""""
|
122 |
+
for item in iterable:
|
123 |
+
item_html = f"""<tr>
|
124 |
+
<td align="left"><strong>{iterable_type}</strong></td>
|
125 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-owners-{block_id}"
|
126 |
+
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-{block_id}t" hx-swap="outerHTML"
|
127 |
+
title="Store Size">{item['name']}</textarea></td>
|
128 |
+
</tr>"""
|
129 |
+
iterable_html += item_html
|
130 |
+
return iterable_html
|
131 |
+
def process_rumors_into_html(rumors, block_id):
|
132 |
+
rumors_html = f""""""
|
133 |
+
for rumor in rumors:
|
134 |
+
rumor_html = f"""<tr>
|
135 |
+
<td align="left"><strong>Store Rumors</strong></td>
|
136 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-rumors-{block_id}"
|
137 |
+
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-rumors-{block_id}t" hx-swap="outerHTML"
|
138 |
+
title="Store Size">{rumor}</textarea></td>
|
139 |
+
</tr>"""
|
140 |
+
rumors_html += rumor_html
|
141 |
+
return rumors_html
|
142 |
+
|
143 |
+
owners_html = process_iterable_into_html('Store Owners', store_owners, block_id)
|
144 |
+
employees_html = process_iterable_into_html('Store Employees', store_employees, block_id)
|
145 |
+
store_specialties_html = process_iterable_into_html('Store Specialties', store_specialties, block_id)
|
146 |
+
store_services_html = process_iterable_into_html('Store Services', store_services, block_id)
|
147 |
+
store_rumors_html = process_rumors_into_html(store_rumors, block_id)
|
148 |
+
|
149 |
+
store_iterables_html = f"""
|
150 |
+
{owners_html}
|
151 |
+
{employees_html}
|
152 |
+
{store_services_html}
|
153 |
+
{store_specialties_html}
|
154 |
+
{store_rumors_html}
|
155 |
+
"""
|
156 |
+
store_end_html = f"""
|
157 |
<tr>
|
158 |
<td align="left"><strong>Store Reputation</strong></td>
|
159 |
+
<td align="right"><textarea class="string-action-description-textarea" id="user-store-reputation-{block_id}"
|
160 |
hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-reputation-{block_id}t" hx-swap="outerHTML"
|
161 |
title="Store Size">{store_reputation}</textarea></td>
|
162 |
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
163 |
</tbody>
|
164 |
</table>
|
165 |
</div>
|
166 |
</div>
|
167 |
"""
|
168 |
+
store_properties_block_html = f"""{store_properties_base_html}
|
169 |
+
{store_iterables_html}
|
170 |
+
{store_end_html}"""
|
171 |
return store_properties_block_html
|
172 |
+
|
173 |
def list_names_to_str(data):
|
174 |
list_of_names = []
|
175 |
for i in data:
|
sd_generator.py
CHANGED
@@ -1,30 +1,14 @@
|
|
1 |
-
import
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
"steps": 28,
|
16 |
-
"prompt": f"This is a {image_subject} it looks likes {sd_prompt} ",
|
17 |
-
"aspect_ratio": "1:1",
|
18 |
-
"output_format": "webp",
|
19 |
-
"output_quality": 90,
|
20 |
-
"negative_prompt": "",
|
21 |
-
"prompt_strength": 0.85
|
22 |
-
}
|
23 |
-
)
|
24 |
-
print(output)
|
25 |
-
image_url = output[0] # Assume the first output is the image URL
|
26 |
-
|
27 |
-
return image_url
|
28 |
-
|
29 |
-
|
30 |
-
|
|
|
1 |
+
import fal_client
|
2 |
+
def preview_and_generate_image(image_subject, image_subject_name ,sd_prompt):
|
3 |
+
handler = fal_client.submit(
|
4 |
+
"fal-ai/flux/dev",
|
5 |
+
arguments={
|
6 |
+
"prompt": f"A fantasy image of a {image_subject} in a fantasy world, the name of the store is {image_subject_name} it looks likes {sd_prompt}",
|
7 |
+
"num_inference_steps": 28,
|
8 |
+
"guidance_scale": 3.5,
|
9 |
+
|
10 |
+
},
|
11 |
+
)
|
12 |
+
|
13 |
+
result = handler.get()
|
14 |
+
return result['images'][0]['url']
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
storeUI.html
CHANGED
@@ -420,7 +420,7 @@ div[contenteditable="true"] p::first-letter {
|
|
420 |
|
421 |
.string-action-description-textarea {
|
422 |
width: 100%;
|
423 |
-
height:
|
424 |
font-size: .318cm;
|
425 |
font-weight: 400;
|
426 |
line-height: 1.2em;
|
@@ -436,9 +436,6 @@ div[contenteditable="true"] p::first-letter {
|
|
436 |
background: none;
|
437 |
resize: none; /* Prevents the textarea from being manually resizable */
|
438 |
overflow: hidden; /* Hide scrollbars */
|
439 |
-
|
440 |
-
|
441 |
-
|
442 |
}
|
443 |
|
444 |
.block.monster.frame.wide {
|
@@ -676,6 +673,7 @@ div[contenteditable="true"] p::first-letter {
|
|
676 |
|
677 |
});
|
678 |
// console.log('Final state of blockContainer:', blockContainer.innerHTML);
|
|
|
679 |
}
|
680 |
|
681 |
storeInitialPositions();
|
@@ -685,24 +683,34 @@ div[contenteditable="true"] p::first-letter {
|
|
685 |
el.style.height = (el.scrollHeight) + 'px';
|
686 |
}
|
687 |
|
688 |
-
|
689 |
-
|
690 |
-
|
691 |
-
|
692 |
-
|
693 |
-
|
694 |
-
|
695 |
-
|
696 |
-
|
697 |
-
|
698 |
-
|
699 |
-
|
700 |
-
|
701 |
-
|
|
|
702 |
adjustTextareaHeight(textarea);
|
|
|
|
|
|
|
|
|
|
|
703 |
});
|
704 |
});
|
705 |
-
}
|
|
|
|
|
|
|
|
|
706 |
|
707 |
async function extractBlocks() {
|
708 |
|
@@ -749,7 +757,7 @@ div[contenteditable="true"] p::first-letter {
|
|
749 |
const blockId = event.target.getAttribute('data-block-id');
|
750 |
generateImage(blockId);
|
751 |
}
|
752 |
-
|
753 |
|
754 |
// Function to generate image
|
755 |
function generateImage(blockId) {
|
@@ -927,7 +935,7 @@ div[contenteditable="true"] p::first-letter {
|
|
927 |
// Reset opacity of dragged element
|
928 |
newBlockContent.style.opacity = '1';
|
929 |
console.log(`Moved existing block with ID: ${blockId} to page ID: ${newPageId}`);
|
930 |
-
|
931 |
// Adjust layouts
|
932 |
if (originalPageId !== 'block-container') {
|
933 |
adjustPageLayout(originalPageId);
|
@@ -1227,6 +1235,7 @@ div[contenteditable="true"] p::first-letter {
|
|
1227 |
// Remove the "over" class and reset the background image
|
1228 |
trashArea.classList.remove('over');
|
1229 |
trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
|
|
|
1230 |
}
|
1231 |
|
1232 |
function handleTrashOver(e) {
|
@@ -1311,6 +1320,7 @@ div[contenteditable="true"] p::first-letter {
|
|
1311 |
createNewPage();
|
1312 |
|
1313 |
console.log('Reset complete, all blocks moved back to block-container');
|
|
|
1314 |
}
|
1315 |
|
1316 |
pageContainer.addEventListener('dragover', handleDragOver);
|
|
|
420 |
|
421 |
.string-action-description-textarea {
|
422 |
width: 100%;
|
423 |
+
height:16px;
|
424 |
font-size: .318cm;
|
425 |
font-weight: 400;
|
426 |
line-height: 1.2em;
|
|
|
436 |
background: none;
|
437 |
resize: none; /* Prevents the textarea from being manually resizable */
|
438 |
overflow: hidden; /* Hide scrollbars */
|
|
|
|
|
|
|
439 |
}
|
440 |
|
441 |
.block.monster.frame.wide {
|
|
|
673 |
|
674 |
});
|
675 |
// console.log('Final state of blockContainer:', blockContainer.innerHTML);
|
676 |
+
initializeTextareaResizing();
|
677 |
}
|
678 |
|
679 |
storeInitialPositions();
|
|
|
683 |
el.style.height = (el.scrollHeight) + 'px';
|
684 |
}
|
685 |
|
686 |
+
function initializeTextareaResizing() {
|
687 |
+
const classes = [
|
688 |
+
'description-textarea',
|
689 |
+
'user-description-textarea',
|
690 |
+
'heading-textarea',
|
691 |
+
'properties-textarea',
|
692 |
+
'string-stat-textarea',
|
693 |
+
'string-action-description-textarea',
|
694 |
+
];
|
695 |
+
|
696 |
+
classes.forEach(className => {
|
697 |
+
const textareas = document.querySelectorAll(`.${className}`);
|
698 |
+
console.log(`Textareas found for ${className}:`, textareas.length); // Debugging line
|
699 |
+
textareas.forEach(textarea => {
|
700 |
+
// Adjust height on page load
|
701 |
adjustTextareaHeight(textarea);
|
702 |
+
// Adjust height on input
|
703 |
+
textarea.addEventListener('input', function() {
|
704 |
+
adjustTextareaHeight(textarea);
|
705 |
+
console.log('Input event triggered for:', textarea.id); // Debugging line
|
706 |
+
});
|
707 |
});
|
708 |
});
|
709 |
+
}
|
710 |
+
|
711 |
+
// Initial run on page load
|
712 |
+
initializeTextareaResizing();
|
713 |
+
|
714 |
|
715 |
async function extractBlocks() {
|
716 |
|
|
|
757 |
const blockId = event.target.getAttribute('data-block-id');
|
758 |
generateImage(blockId);
|
759 |
}
|
760 |
+
});
|
761 |
|
762 |
// Function to generate image
|
763 |
function generateImage(blockId) {
|
|
|
935 |
// Reset opacity of dragged element
|
936 |
newBlockContent.style.opacity = '1';
|
937 |
console.log(`Moved existing block with ID: ${blockId} to page ID: ${newPageId}`);
|
938 |
+
initializeTextareaResizing();
|
939 |
// Adjust layouts
|
940 |
if (originalPageId !== 'block-container') {
|
941 |
adjustPageLayout(originalPageId);
|
|
|
1235 |
// Remove the "over" class and reset the background image
|
1236 |
trashArea.classList.remove('over');
|
1237 |
trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
|
1238 |
+
initializeTextareaResizing();
|
1239 |
}
|
1240 |
|
1241 |
function handleTrashOver(e) {
|
|
|
1320 |
createNewPage();
|
1321 |
|
1322 |
console.log('Reset complete, all blocks moved back to block-container');
|
1323 |
+
initializeTextareaResizing();
|
1324 |
}
|
1325 |
|
1326 |
pageContainer.addEventListener('dragover', handleDragOver);
|