Skip to content

Commit c3481fb

Browse files
AndreyHirsaAndreyHirsa
authored
feat(cli): exclude non-translatable tags inside SVG from requests to LLM (#1898)
* feat(cli): exclude non-translatable SVG tags from requests to LLM * fix(cli): fix demo exmaples * fix(cli): fix twig demo exmaple * fix(cli): extract attributes before applying SVG extraction strategy
1 parent 9c1812b commit c3481fb

File tree

14 files changed

+1820
-574
lines changed

14 files changed

+1820
-574
lines changed

‎.changeset/fuzzy-ears-work.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"lingo.dev": patch
3+
---
4+
5+
Refactor HTML/Twig extraction to handle SVG content correctly using a strategy-based approach

‎packages/cli/demo/ejs/en/example.ejs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,29 @@
1717
</div>
1818
1919
<img src="/avatar.jpg" alt="User avatar" title="Click to edit profile">
20+
21+
<div>
22+
<svg width="340" height="130" xmlns="http://www.w3.org/2000/svg">
23+
<title><%= user.name %> Dashboard Card</title>
24+
<desc>Account activity and notifications panel</desc>
25+
<defs>
26+
<linearGradient id="dashGrad" x1="0%" y1="0%" x2="100%" y2="100%">
27+
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
28+
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:1" />
29+
</linearGradient>
30+
</defs>
31+
<rect width="340" height="130" fill="url(#dashGrad)" rx="10"/>
32+
<circle cx="55" cy="65" r="32" fill="rgba(255,255,255,0.2)"/>
33+
<path d="M 45 65 L 50 72 L 65 55" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
34+
<g fill="white">
35+
<text x="105" y="48" font-size="22" font-weight="bold">All Systems Active</text>
36+
<text x="105" y="72" font-size="14">You have <tspan font-weight="bold">5</tspan> new notifications</text>
37+
</g>
38+
<rect x="105" y="85" width="210" height="30" fill="rgba(255,255,255,0.15)" rx="6"/>
39+
<text x="210" y="105" text-anchor="middle" fill="white" font-size="13" font-weight="600">View Notifications</text>
40+
</svg>
41+
</div>
42+
2043
<button type="button" aria-label="Close notification" title="Close">×</button>
2144
<% } else { %>
2245
<h1>Please log in</h1>

‎packages/cli/demo/ejs/es/example.ejs‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,29 @@
1717
</div>
1818
1919
<img src="/avatar.jpg" alt="User avatar" title="Click to edit profile">
20+
21+
<div>
22+
<svg width="340" height="130" xmlns="http://www.w3.org/2000/svg">
23+
<title><%= user.name %> Tarjeta del panel</title>
24+
<desc>Panel de actividad de cuenta y notificaciones</desc>
25+
<defs>
26+
<linearGradient id="dashGrad" x1="0%" y1="0%" x2="100%" y2="100%">
27+
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
28+
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:1" />
29+
</linearGradient>
30+
</defs>
31+
<rect width="340" height="130" fill="url(#dashGrad)" rx="10"/>
32+
<circle cx="55" cy="65" r="32" fill="rgba(255,255,255,0.2)"/>
33+
<path d="M 45 65 L 50 72 L 65 55" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
34+
<g fill="white">
35+
<text x="105" y="48" font-size="22" font-weight="bold">Todos los sistemas activos</text>
36+
<text x="105" y="72" font-size="14">Tienes <tspan font-weight="bold">5</tspan> notificaciones nuevas</text>
37+
</g>
38+
<rect x="105" y="85" width="210" height="30" fill="rgba(255,255,255,0.15)" rx="6"/>
39+
<text x="210" y="105" text-anchor="middle" fill="white" font-size="13" font-weight="600">Ver notificaciones</text>
40+
</svg>
41+
</div>
42+
2043
<button type="button" aria-label="Close notification" title="Close">×</button>
2144
<% } else { %>
2245
<h1>Por favor, inicia sesión</h1>
@@ -49,7 +72,7 @@
4972

5073
<script>
5174
function showForgotPassword() {
52-
alert("Contacta con soporte para obtener ayuda.");
75+
alert("Contact support for help.");
5376
}
5477
</script>
5578
</body>

‎packages/cli/demo/html/en/advanced-example.html‎

Lines changed: 113 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -495,65 +495,120 @@ <h3>Canvas</h3>
495495
<!-- SECTION: SVG -->
496496
<section id="svg" aria-labelledby="svg-heading" class="card">
497497
<h2 id="svg-heading">Inline SVG</h2>
498-
499-
<svg
500-
width="100%"
501-
height="180"
502-
viewBox="0 0 600 180"
503-
role="img"
504-
aria-label="SVG demo"
505-
>
506-
<defs>
507-
<linearGradient id="g" x1="0" x2="1">
508-
<stop offset="0%" stop-color="#38bdf8" />
509-
<stop offset="100%" stop-color="#22c55e" />
510-
</linearGradient>
511-
<clipPath id="clip">
512-
<circle cx="90" cy="90" r="70" />
513-
</clipPath>
514-
</defs>
515-
516-
<rect x="0" y="0" width="600" height="180" fill="url(#g)" />
517-
<g clip-path="url(#clip)">
518-
<image
519-
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Crect width='100%25' height='100%25' fill='%23111827'/%3E%3Ctext x='50%25' y='50%25' fill='white' dominant-baseline='middle' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E"
520-
x="20"
521-
y="20"
522-
width="140"
523-
height="140"
524-
preserveAspectRatio="xMidYMid slice"
498+
<div>
499+
<svg width="350" height="160" xmlns="http://www.w3.org/2000/svg">
500+
<title>Getting Started Guide</title>
501+
<desc>Welcome message</desc>
502+
<defs>
503+
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
504+
<stop
505+
offset="0%"
506+
style="stop-color: #667eea; stop-opacity: 1"
507+
/>
508+
<stop
509+
offset="100%"
510+
style="stop-color: #764ba2; stop-opacity: 1"
511+
/>
512+
</linearGradient>
513+
</defs>
514+
<rect width="350" height="160" fill="url(#bgGrad)" rx="10" />
515+
<circle
516+
cx="60"
517+
cy="60"
518+
r="35"
519+
fill="rgba(255,255,255,0.2)"
520+
stroke="white"
521+
stroke-width="3"
525522
/>
526-
</g>
527-
528-
<circle
529-
cx="90"
530-
cy="90"
531-
r="70"
532-
fill="none"
533-
stroke="#111827"
534-
stroke-width="6"
535-
/>
536-
<path
537-
d="M220 140 C260 30, 340 30, 380 140"
538-
fill="none"
539-
stroke="#111827"
540-
stroke-width="5"
541-
/>
542-
<polygon
543-
points="420,140 500,40 580,140"
544-
fill="#111827"
545-
opacity="0.3"
546-
/>
547-
<text
548-
x="300"
549-
y="95"
550-
text-anchor="middle"
551-
font-size="28"
552-
fill="#111827"
553-
>
554-
SVG Elements
555-
</text>
556-
</svg>
523+
<path
524+
d="M 50 60 L 55 68 L 72 52"
525+
stroke="white"
526+
stroke-width="4"
527+
fill="none"
528+
stroke-linecap="round"
529+
stroke-linejoin="round"
530+
/>
531+
<g fill="white">
532+
<text x="115" y="50" font-size="24" font-weight="bold">
533+
Welcome!
534+
</text>
535+
<text x="115" y="75" font-size="14">
536+
Ready to explore the platform?
537+
</text>
538+
</g>
539+
<rect
540+
x="40"
541+
y="100"
542+
width="270"
543+
height="40"
544+
fill="rgba(255,255,255,0.15)"
545+
rx="8"
546+
/>
547+
<text
548+
x="175"
549+
y="115"
550+
text-anchor="middle"
551+
fill="white"
552+
font-size="13"
553+
>
554+
Step 1 of 3: Create Your Profile
555+
</text>
556+
<rect
557+
x="50"
558+
y="128"
559+
width="250"
560+
height="6"
561+
fill="rgba(255,255,255,0.2)"
562+
rx="3"
563+
/>
564+
<rect
565+
x="50"
566+
y="128"
567+
width="83"
568+
height="6"
569+
fill="#10b981"
570+
rx="3"
571+
/>
572+
<text
573+
x="175"
574+
y="152"
575+
text-anchor="middle"
576+
fill="rgba(255,255,255,0.8)"
577+
font-size="11"
578+
>
579+
33% Complete
580+
</text>
581+
</svg>
582+
</div>
583+
584+
<button>
585+
<span>Submit</span>
586+
<span>
587+
<svg
588+
width="20px"
589+
height="20px"
590+
viewBox="0 0 24 24"
591+
xmlns="http://www.w3.org/2000/svg"
592+
fill="#000000"
593+
>
594+
<title>Submit icon</title>
595+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
596+
<g
597+
id="SVGRepo_tracerCarrier"
598+
stroke-linecap="round"
599+
stroke-linejoin="round"
600+
></g>
601+
<g id="SVGRepo_iconCarrier">
602+
<path
603+
fill="none"
604+
stroke="#000000"
605+
stroke-width="2"
606+
d="M6,12.4 L18,12.4 M12.6,7 L18,12.4 L12.6,17.8"
607+
></path>
608+
</g>
609+
</svg>
610+
</span>
611+
</button>
557612
</section>
558613

559614
<!-- SECTION: MATHML -->

0 commit comments

Comments
 (0)