Retrieve

Back to 'bg-gray-400' version

screencoder/html_generator.py

@@ -41,7 +41,7 @@ def get_prompt_dict(instructions):
     # only return the code within the <div> and </div> tags""",
     # }
     return {
-        "sidebar": f"""这是一个container的截图。这是用户给的额外要求：{instructions["sidebar"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。请注意所有组块的排版、图标样式、大小、文字信息需要在用户额外条件的基础上与原始截图基本保持一致。请保持图标一致，如果是大块图像，请使用"placeholder.png"替换，注意代码中的大小和位置信息。以下是供填写的代码：
+        "sidebar": f"""这是一个container的截图。这是用户给的额外要求：{instructions["sidebar"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。请注意所有组块的排版、图标样式、大小、文字信息需要在用户额外条件的基础上与原始截图基本保持一致。请保持生成的svg图标和原图一致。请使用相同大小、位置的纯灰色图像块并标记为"bg-gray-400"代替图片，注意代码中的大小和位置信息。以下是供填写的代码：
 
         <div>
         your code here
@@ -49,7 +49,7 @@ def get_prompt_dict(instructions):
 
         只需返回<div>和</div>标签内的代码""",
 
-        "header": f"""这是一个container的截图。这是用户给的额外要求：{instructions["header"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。请注意所有组块在boundary box中的相对位置、排版、文字信息、颜色需要在用户额外条件的基础上与原始截图基本保持一致。以下是供填写的代码：
+        "header": f"""这是一个container的截图。这是用户给的额外要求：{instructions["header"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。请注意所有组块在boundary box中的相对位置、排版、文字信息、颜色需要在用户额外条件的基础上与原始截图基本保持一致。请保持生成的svg图标和原图一致。请使用相同大小、位置的纯灰色图像块并标记为"bg-gray-400"代替图片，注意代码中的大小和位置信息。以下是供填写的代码：
 
         <div>
         your code here
@@ -57,7 +57,7 @@ def get_prompt_dict(instructions):
 
         只需返回<div>和</div>标签内的代码""",
 
-        "navigation": f"""这是一个container的截图。这是用户给的额外要求：{instructions["navigation"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。请注意所有组块的在boundary box中的相对位置、文字排版、颜色需要在用户额外条件的基础上与原始截图基本保持一致。图像请你直接使用原始截图中一致的图标。以下是供填写的代码：
+        "navigation": f"""这是一个container的截图。这是用户给的额外要求：{instructions["navigation"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。请注意所有组块的在boundary box中的相对位置、文字排版、颜色需要在用户额外条件的基础上与原始截图基本保持一致。图像请你直接使用原始截图中一致的图标。请使用相同大小、位置的纯灰色图像块并标记为"bg-gray-400"代替图片，注意代码中的大小和位置信息。以下是供填写的代码：
 
         <div>
         your code here
@@ -65,7 +65,7 @@ def get_prompt_dict(instructions):
 
         只需返回<div>和</div>标签内的代码""",
 
-        "main content": f"""这是一个container的截图。这是用户给的额外要求：{instructions["main content"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。截图中显示的图像务必使用"placeholder.png"替换，注意代码中其大小和位置信息，不需要识别其中的文字信息。请注意所有组块在boundary box中的相对位置、排版、文字信息、颜色需要在用户额外条件的基础上与原始截图基本保持一致。以下是供填写的代码：
+        "main content": f"""这是一个container的截图。这是用户给的额外要求：{instructions["main content"]}请填写一段完整的HTML和tail-wind CSS代码以准确再现给定的容器。截图中显示的图像请使用相同大小、位置的纯灰色图像块并标记为"bg-gray-400"代替图片，注意代码中其大小和位置信息，不需要识别其中的文字信息。请注意所有组块在boundary box中的相对位置、排版、文字信息、颜色需要在用户额外条件的基础上与原始截图基本保持一致。以下是供填写的代码：
 
         <div>
         your code here

screencoder/image_box_detection.py

@@ -59,13 +59,13 @@ def extract_bboxes_from_html_fallback(html_path: Path):
         
         # Extract placeholder bboxes
         placeholder_bboxes = []
-        placeholder_images = soup.find_all('img', src='placeholder.png')
+        placeholder_images = soup.find_all(class_='bg-gray-400')
         for i, img in enumerate(placeholder_images):
             # For fallback, we'll use a simple approach
             # In a real scenario, you'd need to parse the actual layout
             placeholder_bboxes.append({
                 'id': f'ph{i}',
-                'x': 100 + i * 50,  # Simple positioning
+                'x': 100 + i * 50,
                 'y': 100 + i * 50,
                 'w': 100,
                 'h': 100,
@@ -121,7 +121,7 @@ async def extract_bboxes_from_html(html_path: Path):
 
                     const placeholder_bboxes = [];
                     let ph_id_counter = 0;
-                    const all_potential_placeholders = document.querySelectorAll('img[src="placeholder.png"]');
+                    const all_potential_placeholders = document.querySelectorAll('.bg-gray-400');
 
                     for (const el of all_potential_placeholders) {
                         // Apply the same filters as before