drakosfire commited on
Commit
7e1291d
1 Parent(s): 2d15a52

replaced block-content class with block-page to make clearer this is a block on the page,updated css to match, rewrote system prompt in store_helper.py to generate more targeted image prompts, adjuste template_update.html wit h newer prompting

Browse files
Files changed (4) hide show
  1. scripts.js +13 -13
  2. storeUI.css +1 -1
  3. store_helper.py +13 -8
  4. template_update.html +1 -1
scripts.js CHANGED
@@ -138,7 +138,7 @@ document.addEventListener("DOMContentLoaded", function() {
138
 
139
  // Iterate over each block and move it to the pageContainer
140
  blocks.forEach(block => {
141
- block.setAttribute('class', 'block-content');
142
  block.setAttribute('data-page-id', currentPage.getAttribute('data-page-id'));
143
  // Append the block to the current page's columnWrapper
144
  const newPage = currentPage.querySelector('.block.monster.frame.wide');
@@ -493,7 +493,7 @@ document.addEventListener("DOMContentLoaded", function() {
493
 
494
  function handleDragStart(e) {
495
  lockTextareas();
496
- const target = e.target.closest('.block-item, .block-content');
497
  if (!target) {
498
  console.error('Drag started for an element without a valid target');
499
  return;
@@ -529,7 +529,7 @@ document.addEventListener("DOMContentLoaded", function() {
529
  }
530
 
531
  function handleDragEnd(e) {
532
- const target = e.target.closest('.block-item, .block-content');
533
  if (target) {
534
  target.style.opacity = '1'; // Reset the opacity
535
  const blockId = target.getAttribute('data-block-id');
@@ -573,7 +573,7 @@ document.addEventListener("DOMContentLoaded", function() {
573
  targetPage.classList.add('highlight-page'); // Add highlight class for pages
574
  }
575
 
576
- const targetBlock = e.target.closest('.block-item, .block-content');
577
  if (targetBlock) {
578
  const bounding = targetBlock.getBoundingClientRect();
579
  const offset = e.clientY - bounding.top;
@@ -590,7 +590,7 @@ document.addEventListener("DOMContentLoaded", function() {
590
  function handleDrop(e) {
591
  e.preventDefault();
592
  // Ensure we are not dropping into a textarea or another block
593
- if (e.target.classList.contains('block-item', 'block-content', 'description-textarea') || e.target.tagName === 'TEXTAREA') {
594
  console.log('Cannot drop block inside another block or textarea');
595
  return;
596
  }
@@ -613,7 +613,7 @@ document.addEventListener("DOMContentLoaded", function() {
613
  }
614
 
615
  const newBlockContent = document.createElement('div');
616
- newBlockContent.classList.add('block-content');
617
  newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
618
 
619
  // Add necessary attributes and event listeners
@@ -624,7 +624,7 @@ document.addEventListener("DOMContentLoaded", function() {
624
  newBlockContent.addEventListener('dragstart', handleDragStart);
625
  newBlockContent.addEventListener('dragend', handleDragEnd);
626
 
627
- const target = e.target.closest('.block-item, .block-content');
628
  let targetColumn = 1;
629
  if (target) {
630
  const bounding = target.getBoundingClientRect();
@@ -699,7 +699,7 @@ document.addEventListener("DOMContentLoaded", function() {
699
  // Function to get the height of a column by index
700
  function getColumnHeights(pageElement) {
701
  const columns = [0, 0]; // Assuming two columns for simplicity
702
- const blocks = pageElement.querySelectorAll('.block-content');
703
  blocks.forEach(block => {
704
  const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
705
  columns[column - 1] += block.offsetHeight;
@@ -759,7 +759,7 @@ document.addEventListener("DOMContentLoaded", function() {
759
 
760
  if (pages.length > 1) { // Ensure at least one page remains
761
  const lastPage = pages[pages.length - 1];
762
- const blocks = lastPage.querySelectorAll('.block-content'); // Check for blocks inside the last page
763
 
764
  if (blocks.length > 0) {
765
  // If blocks are present, block the removal and display a warning
@@ -777,7 +777,7 @@ document.addEventListener("DOMContentLoaded", function() {
777
 
778
  function handleColumnOverflow(page, targetColumn) {
779
  console.log(`Handling overflow for page ID: ${page.getAttribute('data-page-id')} in column ${targetColumn}`);
780
- const blocks = Array.from(page.querySelectorAll('.block-content'));
781
  let columnHeights = [0, 0];
782
  let overflowStartIndex = -1;
783
 
@@ -800,7 +800,7 @@ document.addEventListener("DOMContentLoaded", function() {
800
  // Get the next page if it exists
801
  const nextPage = getNextPage(page);
802
  if (nextPage) {
803
- const nextPageBlocks = nextPage.querySelectorAll('.block-content, .block-item');
804
  let nextPageColumnHeights = [0, 0];
805
 
806
  nextPageBlocks.forEach(block => {
@@ -854,7 +854,7 @@ document.addEventListener("DOMContentLoaded", function() {
854
 
855
  if (innerHTML && blockId) {
856
  // Find the dragged element and remove it from the DOM
857
- let draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-content`);
858
  if (!draggedElement) {
859
  draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-item`);
860
  }
@@ -864,7 +864,7 @@ document.addEventListener("DOMContentLoaded", function() {
864
  }
865
 
866
  // Check if the block already exists in the block-container and remove it if it does
867
- let existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-content`);
868
  if (!existingBlock) {
869
  existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-item`);
870
  }
 
138
 
139
  // Iterate over each block and move it to the pageContainer
140
  blocks.forEach(block => {
141
+ block.setAttribute('class', 'block-page');
142
  block.setAttribute('data-page-id', currentPage.getAttribute('data-page-id'));
143
  // Append the block to the current page's columnWrapper
144
  const newPage = currentPage.querySelector('.block.monster.frame.wide');
 
493
 
494
  function handleDragStart(e) {
495
  lockTextareas();
496
+ const target = e.target.closest('.block-item, .block-page');
497
  if (!target) {
498
  console.error('Drag started for an element without a valid target');
499
  return;
 
529
  }
530
 
531
  function handleDragEnd(e) {
532
+ const target = e.target.closest('.block-item, .block-page');
533
  if (target) {
534
  target.style.opacity = '1'; // Reset the opacity
535
  const blockId = target.getAttribute('data-block-id');
 
573
  targetPage.classList.add('highlight-page'); // Add highlight class for pages
574
  }
575
 
576
+ const targetBlock = e.target.closest('.block-item, .block-page');
577
  if (targetBlock) {
578
  const bounding = targetBlock.getBoundingClientRect();
579
  const offset = e.clientY - bounding.top;
 
590
  function handleDrop(e) {
591
  e.preventDefault();
592
  // Ensure we are not dropping into a textarea or another block
593
+ if (e.target.classList.contains('block-item', 'block-page', 'description-textarea') || e.target.tagName === 'TEXTAREA') {
594
  console.log('Cannot drop block inside another block or textarea');
595
  return;
596
  }
 
613
  }
614
 
615
  const newBlockContent = document.createElement('div');
616
+ newBlockContent.classList.add('block-page');
617
  newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
618
 
619
  // Add necessary attributes and event listeners
 
624
  newBlockContent.addEventListener('dragstart', handleDragStart);
625
  newBlockContent.addEventListener('dragend', handleDragEnd);
626
 
627
+ const target = e.target.closest('.block-item, .block-page');
628
  let targetColumn = 1;
629
  if (target) {
630
  const bounding = target.getBoundingClientRect();
 
699
  // Function to get the height of a column by index
700
  function getColumnHeights(pageElement) {
701
  const columns = [0, 0]; // Assuming two columns for simplicity
702
+ const blocks = pageElement.querySelectorAll('.block-page');
703
  blocks.forEach(block => {
704
  const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
705
  columns[column - 1] += block.offsetHeight;
 
759
 
760
  if (pages.length > 1) { // Ensure at least one page remains
761
  const lastPage = pages[pages.length - 1];
762
+ const blocks = lastPage.querySelectorAll('.block-page'); // Check for blocks inside the last page
763
 
764
  if (blocks.length > 0) {
765
  // If blocks are present, block the removal and display a warning
 
777
 
778
  function handleColumnOverflow(page, targetColumn) {
779
  console.log(`Handling overflow for page ID: ${page.getAttribute('data-page-id')} in column ${targetColumn}`);
780
+ const blocks = Array.from(page.querySelectorAll('.block-page'));
781
  let columnHeights = [0, 0];
782
  let overflowStartIndex = -1;
783
 
 
800
  // Get the next page if it exists
801
  const nextPage = getNextPage(page);
802
  if (nextPage) {
803
+ const nextPageBlocks = nextPage.querySelectorAll('.block-page, .block-item');
804
  let nextPageColumnHeights = [0, 0];
805
 
806
  nextPageBlocks.forEach(block => {
 
854
 
855
  if (innerHTML && blockId) {
856
  // Find the dragged element and remove it from the DOM
857
+ let draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-page`);
858
  if (!draggedElement) {
859
  draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-item`);
860
  }
 
864
  }
865
 
866
  // Check if the block already exists in the block-container and remove it if it does
867
+ let existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-page`);
868
  if (!existingBlock) {
869
  existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-item`);
870
  }
storeUI.css CHANGED
@@ -135,7 +135,7 @@
135
  }
136
 
137
  /* Ensure the h1 tag is constrained within its column */
138
- .block-content h1 {
139
  column-span: none;
140
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
141
  margin: 0 auto; /* Center the h1 within the column */
 
135
  }
136
 
137
  /* Ensure the h1 tag is constrained within its column */
138
+ .block-page h1 {
139
  column-span: none;
140
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
141
  margin: 0 auto; /* Center the h1 within the column */
store_helper.py CHANGED
@@ -76,24 +76,29 @@ def convert_to_dict(string):
76
 
77
 
78
  # Instructions past 4 are not time tested and may need to be removed.
79
- ### Meta prompted :
80
  initial_prompt_instructions = """ **Purpose**: ONLY Generate a structured json following the provided format. The job is to generate a store with character, style, detail, and a healthy splash of fun, fantasy, and weird. You do not need to stick strictly to the rules and mechanics of the game, if it fits the style and flavor of the user input, get weird, scary, or silly with the details. You will also be writing interesting flavor text and description of the location and it's atmopshere, and a brief one sentence image generation prompts. Us a wide range of words, you have certain words you use too often, avoid them ex : "whimsical", "unwavering".
81
 
82
- Image Generation Prompt Examples :
83
- "A highly detailed fantasy oil painting of an elderly full body female gnome,in a costume shop. The gnome is wearing a costume with wings, with a costume hat . The gnome has distinct fantasy features, such as pointed ears and a small, sturdy build. "
84
 
85
- "A highly detailed fantasy drawing of a middle-aged full body male dwarf in a bustling butcher shop. The dwarf is wearing a bloodstained apron and a butcher's hat. The shop is filled with hanging meats, freshly cut steaks, and various sausages. The dwarf has distinct fantasy features, such as a long braided beard and a stout, muscular build. The background shows the hustle and bustle of Market Square outside the shop window."
 
86
 
87
- "A highly detailed fantasy image of a shady-looking full body male goblin in a dimly lit pawn shop. The goblin is wearing a patched vest and a tattered hat. The shop is cluttered with various items, including old weapons, dusty artifacts, and strange trinkets. The goblin has distinct fantasy features, such as green skin, sharp teeth, and pointed ears. The background is filled with shadows and the glint of hidden treasures."
88
 
89
- "A highly detailed fantasy photo of a scholarly full body female elf in an elegant parchment shop. The elf is wearing a flowing robe and a delicate circlet. The shop is filled with scrolls, quills, and ancient tomes. The elf has distinct fantasy features, such as pointed ears and a slender, graceful build. The background shows the interior of the shop with shelves lined with parchment and ink bottles, and a large window letting in natural light."
90
 
91
- "A highly detailed fantasy painting of a mysterious full body male tiefling in a mystical magic shop. The tiefling is wearing a long cloak and a hood, with glowing runes on his hands. The shop is filled with potions, spellbooks, and enchanted artifacts. The tiefling has distinct fantasy features, such as red skin, horns, and a tail. The background is filled with a magical aura, with various mystical items floating in the air and a crystal ball on the counter."
 
 
 
 
 
92
 
93
  1. Only output file structure starting with { and ending with } it is CRITICAL to end with a }, DO NOT say anything, don't add ''' or json"
94
  2. DO NOT use null, use "".
95
  3. All keys and values MUST be enclosed in double quotes. ""
96
- 4. Services and specialties should have name, description, and prices.
97
  5. sd_prompts should specify race or species
98
  6. quests MUST be detailed, and interesting, preferably unexpected, delightful and memorable.
99
  7. The reward for the quest MUST be specific and detailed!
 
76
 
77
 
78
  # Instructions past 4 are not time tested and may need to be removed.
79
+ ### System prompt :
80
  initial_prompt_instructions = """ **Purpose**: ONLY Generate a structured json following the provided format. The job is to generate a store with character, style, detail, and a healthy splash of fun, fantasy, and weird. You do not need to stick strictly to the rules and mechanics of the game, if it fits the style and flavor of the user input, get weird, scary, or silly with the details. You will also be writing interesting flavor text and description of the location and it's atmopshere, and a brief one sentence image generation prompts. Us a wide range of words, you have certain words you use too often, avoid them ex : "whimsical", "unwavering".
81
 
82
+ store_front_sd_prompt should be from the exterior, emphasize the store's architecture, style, and atmosphere and exclude descriptions of the owner.
 
83
 
84
+ storefront_sd_prompt Examples :
85
+ "A highly detailed fantasy painting of the exterior of a bustling magic shop. The shop is adorned with glowing runes, enchanted crystals, and mystical artifacts. The shop sign reads "Arcane Emporium" in elegant script. The street is filled with magical creatures, floating lanterns, and colorful stalls. "
86
 
87
+ "A highly detailed fantasy drawing of the entrance to a mysterious alchemy shop. The shop is hidden down a narrow alley, with a flickering lantern above the door. The shop sign reads "Elixir Emporium" in faded letters. The alley is filled with shadows, strange smells, and the distant sound of bubbling potions. "
88
 
89
+ "A highly detailed fantasy photo of the front of a grand weapon shop. The shop is decorated with suits of armor, hanging banners, and a large sword embedded in the stone facade. The shop sign reads "Ironclad Armory" in bold letters. The street is filled with armored guards, clashing swords, and the sound of ringing anvils. "
90
 
91
+ Owner and Employee Generation Prompt Examples :
92
+ "A highly detailed fantasy oil painting portrait of a wise and mysterious shop owner. The owner is an elderly elf with silver hair, a long beard, and piercing blue eyes. They wear flowing robes, a jeweled amulet, and a crown of thorns. The owner is surrounded by magical artifacts, ancient tomes, and glowing crystals."
93
+
94
+ "A highly detailed fantasy charcoal sketch of a quirky and eccentric shop employee. The employee is a young gnome with wild hair, mismatched eyes, and a mischievous grin. They wear patched clothes, a bandolier of potions, and a pet dragon perched on their shoulder. The employee is surrounded by alchemical ingredients, bubbling cauldrons, and floating spellbooks."
95
+
96
+ "A highly detailed fantasy watercolor painting of a stoic and intimidating shop security guard. The guard is a massive half-orc with a shaved head, a scarred face, and a stern expression. They wear heavy armor, a massive sword, and a shield emblazoned with a roaring lion. The guard is surrounded by chained beasts, locked chests, and glowing runes."
97
 
98
  1. Only output file structure starting with { and ending with } it is CRITICAL to end with a }, DO NOT say anything, don't add ''' or json"
99
  2. DO NOT use null, use "".
100
  3. All keys and values MUST be enclosed in double quotes. ""
101
+ 4. Services and specialties should have name, description, and prices.
102
  5. sd_prompts should specify race or species
103
  6. quests MUST be detailed, and interesting, preferably unexpected, delightful and memorable.
104
  7. The reward for the quest MUST be specific and detailed!
template_update.html CHANGED
@@ -9,7 +9,7 @@
9
  </div>
10
 
11
  <div class="block-item" data-block-id="1" data-page-id="block-container" draggable="true">
12
- <textarea class="image-textarea" id="sdprompt-1" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 80px;">A highly detailed fantasy painting of a curious sentient potted plant in a vibrant gear shop. The plant has phosphorescent leaves and delicate, intricate roots. The shop is filled with glowing flora, magical tools, and adventure gear. The background shows enchanted trees intertwined with the walls and ceiling.</textarea>
13
  <button class="generate-image-button" data-block-id="1">Generate Image</button>
14
  <img id="generated-image-1" alt="" style="display: none; cursor: pointer;">
15
  </div>
 
9
  </div>
10
 
11
  <div class="block-item" data-block-id="1" data-page-id="block-container" draggable="true">
12
+ <textarea class="image-textarea" id="sdprompt-1" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 80px;">A highly detailed fantasy painting of the exterior of a greenhouse that serves double duty as a adventuring gear shop, that is also a greenhouse and is overflowing with plants as well as equipment</textarea>
13
  <button class="generate-image-button" data-block-id="1">Generate Image</button>
14
  <img id="generated-image-1" alt="" style="display: none; cursor: pointer;">
15
  </div>