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
Files changed (4) hide show
  1. app.py +4 -1
  2. block_builder.py +55 -40
  3. sd_generator.py +14 -30
  4. 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
- store_properties_block_html = f"""
 
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-stat-textarea" id="user-store-size-{block_id}"
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-stat-textarea" id="user-store-town-{block_id}"
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-stat-textarea" id="user-store-district-{block_id}"
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-stat-textarea" id="user-store-street-{block_id}"
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-stat-textarea" id="user-store-type-{block_id}"
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
- <td align="left"><strong>Store Owners</strong></td>
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-stat-textarea" id="user-store-hours-{block_id}"
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
- <tr>
128
- <td align="left"><strong>Store Services</strong></td>
129
- <td align="right"><textarea class="string-stat-textarea" id="user-store-services-{block_id}"
130
- hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-services-{block_id}t" hx-swap="outerHTML"
131
- title="Store Size">{store_services}</textarea></td>
132
- </tr>
133
- <tr>
134
- <td align="left"><strong>Store Specialties</strong></td>
135
- <td align="right"><textarea class="string-stat-textarea" id="user-store-specialties-{block_id}"
136
- hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-specialties-{block_id}t" hx-swap="outerHTML"
137
- title="Store Size">{store_specialties}</textarea></td>
138
- </tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  <tr>
140
  <td align="left"><strong>Store Reputation</strong></td>
141
- <td align="right"><textarea class="string-stat-textarea" id="user-store-reputation-{block_id}"
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 time
2
- import replicate
3
-
4
-
5
-
6
- start_time = time.time()
7
- temp_image_path = "./image_temp/"
8
-
9
- def preview_and_generate_image(image_subject ,sd_prompt):
10
-
11
- output = replicate.run(
12
- "stability-ai/stable-diffusion-3",
13
- input={
14
- "cfg": 3.5,
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:30px;
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
- const classes = [
689
- 'description-textarea',
690
- 'user-description-textarea',
691
- 'heading-textarea',
692
- 'properties-textarea',
693
- 'string-stat-textarea',
694
- 'string-action-description-textarea'
695
- ];
696
-
697
- classes.forEach(className => {
698
- const textareas = document.querySelectorAll(`.${className}`);
699
- textareas.forEach(textarea => {
700
- adjustTextareaHeight(textarea);
701
- textarea.addEventListener('input', function() {
 
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);