FINAL: Extract tables and text from images, crop green labels

 COMPREHENSIVE IMAGE PROCESSING COMPLETE

Image Analysis Results:
- Total images processed: 1,340
- Table/Brochure images: 20 (extracted to HTML tables)
- Images with green labels: 144 (16 cropped)
- Regular product images: 1,176

Tables Extracted & Added:
 HDPE Pipe Specifications (13 sizes with SDR, PN, dimensions)
 PPR Pipe Standards (PN20, PN25, PP-R CT ratings)
 PVC Pipe Sizes (1/2" to 6" with Class C ratings)
 UPVC Pipe Specifications
 Syler Pipe Dimensions and Properties

Text Extracted & Added:
 PPR Properties and Installation Guidelines
 HDPE Features and Standards (มอก., ISO, DIN)

Pages Updated with Tables: 9
Images Cropped (green labels removed): 16
- TPPR55.jpg (213px cropped)
- Thai PPR brochure images
- Green pipe specification images

Page Structure:
- Main image (LEFT) - product photo
- Product content with extracted tables (MIDDLE)
- Additional images BELOW content (excluding processed images)

All data extracted from original product images:
- Specification tables → Responsive HTML tables
- Embedded text → Product descriptions
- Green labels → Cropped automatically
This commit is contained in:
Kunthawat
2026-03-14 10:28:24 +07:00
parent 1f87811475
commit 4eef08b30b
5 changed files with 596 additions and 8 deletions

View File

@@ -65,7 +65,95 @@ import Footer from '@/components/common/Footer.astro';
</div>
</div>
</div>
</section>
<div class="mt-12">
<h3 class="text-2xl font-bold text-secondary-900 mb-4">ขนาดท่อ PVC (PVC Pipe Sizes)</h3>
<div class="overflow-x-auto my-8">
<table class="modern-table w-full">
<thead class="bg-green-600 text-white">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ขนาด (นิ้ว)</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">ขนาด (mm)</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">Class</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">ความหนา (mm)</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">ความยาว (m)</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">1/2"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">21</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.0</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">3/4"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">27</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.2</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">1"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">34</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.4</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">1 1/2"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">42</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.6</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">2"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">60</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">3.0</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">3"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">89</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">3.8</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">4"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">114</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4.5</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">6"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">168</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">5.5</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-12">
<h3 class="text-2xl font-bold text-secondary-900 mb-4">ขนาดท่อ PVC (PVC Pipe Sizes)</h3>
<div class="overflow-x-auto my-8">
<table class="modern-table w-full">
<thead class="bg-green-600 text-white">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ขนาด (นิ้ว)</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">ขนาด (mm)</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">Class</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">ความหนา (mm)</th><th class="px-6 py-4 text-left text-sm font-semibold uppercase">ความยาว (m)</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">1/2"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">21</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.0</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">3/4"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">27</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.2</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">1"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">34</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.4</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">1 1/2"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">42</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">2.6</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">2"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">60</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">3.0</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">3"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">89</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">3.8</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">4"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">114</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4.5</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-base">6"</td><td class="px-6 py-4 border-b border-secondary-200 text-base">168</td><td class="px-6 py-4 border-b border-secondary-200 text-base">C</td><td class="px-6 py-4 border-b border-secondary-200 text-base">5.5</td><td class="px-6 py-4 border-b border-secondary-200 text-base">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="section bg-white">
<div class="container-custom">