rodrigo/anatomia
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

musculo externo abdome

Browse Source
This commit is contained in:
Rodrigo Bertoldo de Sousa Martins committed 2026-09-13 19:38:16 -03:00
1 parent bc23a068dd
commit 06ace7505c
6 files changed
+211 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

data-pipeline/scripts/muscle-descriptions.mjs
+4 -4
View File
@@ -17,7 +17,7 @@ export const MUSCLE_DESCRIPTIONS = {
"pectoralis major": "Músculo grande e em leque do tórax anterior; aduz e roda medialmente o braço, e o flexiona a partir de posição estendida.",
"pectoralis minor": "Sob o peitoral maior; traciona a escápula para baixo e para frente, e eleva as costelas na respiração forçada.",
"rectus abdominis": "Par de músculos verticais na linha média do abdome; flexiona o tronco e comprime o conteúdo abdominal. Na malha 3D aparece como uma superfície lisa, mas na pessoa de verdade é cruzado por 3-4 intersecções tendíneas horizontais que criam o 'tanquinho' — veja a ilustração na descrição.",
"external oblique": "Camada mais superficial dos músculos laterais do abdome; flexiona e roda o tronco para o lado oposto, e comprime o abdome. Suas fibras superiores se entrelaçam (interdigitam) com as do serrátil anterior nas costelas, um encaixe que não aparece na malha 3D — veja a ilustração na descrição.",
"external oblique": "Camada mais superficial das 4 que formam a parede abdominal (por fora do oblíquo interno e do transverso — veja a ilustração na descrição); flexiona e roda o tronco para o lado oposto, e comprime o abdome. Suas fibras superiores também se entrelaçam com as do serrátil anterior nas costelas.",
"internal oblique": "Camada intermediária dos músculos laterais do abdome; flexiona e roda o tronco para o mesmo lado, e comprime o abdome.",
"latissimus dorsi": "O maior músculo do dorso; estende, aduz e roda medialmente o braço — o principal músculo do movimento de 'puxar para baixo' (ex: nadar, remar).",
"gluteus maximus": "O maior e mais superficial músculo glúteo; principal extensor do quadril, essencial para subir escadas e levantar-se de uma cadeira.",
@@ -92,9 +92,9 @@ export const MUSCLE_DESCRIPTIONS = {
"thyro-epiglottic part of thyro-arytenoid muscle": "Porção tireoepiglótica do tireoaritenóideo; auxilia a estreitar a entrada da laringe durante a deglutição, protegendo a via aérea.",
// ---- Coluna, dorso e parede do tronco ----
"external abdominal oblique muscle": "Mesma função do 'external oblique': camada mais superficial da parede lateral do abdome, flexiona e roda o tronco para o lado oposto. Suas fibras superiores se entrelaçam (interdigitam) com as do serrátil anterior nas costelas — um encaixe que a malha 3D não modela; veja a ilustração na descrição.",
"internal abdominal oblique muscle": "Mesma função do 'internal oblique': camada intermediária, flexiona e roda o tronco para o mesmo lado.",
"transversus abdominis muscle": "Camada mais profunda da parede abdominal, com fibras horizontais; comprime o conteúdo abdominal (como uma 'cinta' natural), estabilizando o tronco.",
"external abdominal oblique muscle": "Mesma função do 'external oblique': camada mais superficial das 4 que formam a parede abdominal (veja a ilustração na descrição), flexiona e roda o tronco para o lado oposto. Suas fibras superiores também se entrelaçam com as do serrátil anterior nas costelas.",
"internal abdominal oblique muscle": "Mesma função do 'internal oblique': camada intermediária, flexiona e roda o tronco para o mesmo lado. Fica sob o oblíquo externo e sobre o transverso do abdome — veja a ilustração na descrição.",
"transversus abdominis muscle": "Camada mais profunda da parede abdominal, com fibras horizontais; comprime o conteúdo abdominal (como uma 'cinta' natural), estabilizando o tronco. É a camada mais interna das 4 que formam a parede abdominal — veja a ilustração na descrição.",
"rectus abdominis muscle": "Mesma função do 'rectus abdominis': flexiona o tronco e comprime o abdome. Na pessoa de verdade é cruzado por 3-4 intersecções tendíneas horizontais (o 'tanquinho'), que a malha 3D não modela — veja a ilustração na descrição.",
"pyramidalis muscle": "Pequeno músculo variável na frente do reto abdominal; tensiona a linha alba.",
"quadratus lumborum muscle": "Na parede posterior do abdome; flexiona lateralmente o tronco e estabiliza a 12ª costela durante a respiração.",
frontend/public/muscular/parede-abdominal-camadas.svg
+104
View File
@@ -0,0 +1,104 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 496" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif">
<rect x="0" y="0" width="760" height="496" fill="#ffffff" />
<!-- Silhueta do tronco -->
<path d="M 250 20
C 320 5, 440 5, 510 20
L 530 90
C 545 180, 545 300, 525 400
C 500 445, 440 465, 380 465
C 320 465, 260 445, 235 400
C 215 300, 215 180, 230 90
Z"
fill="#f0c9a0" stroke="#c9915c" stroke-width="2" />
<!-- ===== Reto do abdome (faixa central vertical, com intersecções tendíneas) ===== -->
<clipPath id="rectusClip">
<path d="M 250 20 C 320 5, 440 5, 510 20 L 530 90 C 545 180, 545 300, 525 400 C 500 445, 440 465, 380 465 C 320 465, 260 445, 235 400 C 215 300, 215 180, 230 90 Z" />
</clipPath>
<g clip-path="url(#rectusClip)">
<rect x="337" y="60" width="86" height="380" fill="#c0392b" />
<!-- linha alba (linha branca central) -->
<rect x="377" y="60" width="6" height="380" fill="#f4e6d7" />
<!-- intersecções tendíneas (faixas brancas horizontais) -->
<rect x="337" y="130" width="86" height="10" fill="#f4e6d7" />
<rect x="337" y="230" width="86" height="10" fill="#f4e6d7" />
<rect x="337" y="330" width="86" height="10" fill="#f4e6d7" />
<!-- textura de fibra vertical, discreta -->
<g stroke="#a5301f" stroke-width="1.5" opacity="0.5">
<line x1="345" y1="65" x2="345" y2="435" />
<line x1="356" y1="65" x2="356" y2="435" />
<line x1="367" y1="65" x2="367" y2="435" />
<line x1="393" y1="65" x2="393" y2="435" />
<line x1="404" y1="65" x2="404" y2="435" />
<line x1="415" y1="65" x2="415" y2="435" />
</g>
</g>
<!-- ===== Corte em degraus do lado direito (oblíquo externo > interno > transverso) ===== -->
<!-- Degrau 1 (mais superficial): Oblíquo Externo do Abdome -->
<g>
<rect x="428" y="60" width="102" height="330" fill="#d9573f" stroke="#8f3423" stroke-width="2" />
<g stroke="#8f3423" stroke-width="1.6" opacity="0.55">
<line x1="432" y1="70" x2="470" y2="100" />
<line x1="432" y1="100" x2="490" y2="145" />
<line x1="432" y1="130" x2="510" y2="190" />
<line x1="432" y1="160" x2="524" y2="235" />
<line x1="432" y1="190" x2="524" y2="275" />
<line x1="432" y1="220" x2="524" y2="315" />
<line x1="432" y1="250" x2="524" y2="355" />
<line x1="432" y1="280" x2="500" y2="380" />
<line x1="432" y1="310" x2="470" y2="380" />
</g>
</g>
<!-- Degrau 2: Oblíquo Interno do Abdome (encaixado dentro do degrau 1) -->
<g>
<rect x="452" y="130" width="70" height="220" fill="#e8865f" stroke="#8f3423" stroke-width="2" />
<g stroke="#8f3423" stroke-width="1.6" opacity="0.55">
<line x1="456" y1="340" x2="486" y2="136" />
<line x1="472" y1="346" x2="502" y2="136" />
<line x1="488" y1="346" x2="518" y2="150" />
<line x1="504" y1="346" x2="518" y2="180" />
</g>
</g>
<!-- Degrau 3 (mais profundo): Transverso do Abdome -->
<g>
<rect x="468" y="190" width="42" height="110" fill="#f2b28c" stroke="#8f3423" stroke-width="2" />
<g stroke="#8f3423" stroke-width="1.6" opacity="0.55">
<line x1="468" y1="210" x2="510" y2="210" />
<line x1="468" y1="230" x2="510" y2="230" />
<line x1="468" y1="250" x2="510" y2="250" />
<line x1="468" y1="270" x2="510" y2="270" />
</g>
</g>
<!-- ===== Caixas de rótulo (texto vetorial de verdade, sem risco de ficar ilegível) ===== -->
<!-- Reto do abdome -->
<line x1="380" y1="180" x2="380" y2="120" stroke="#1f2937" stroke-width="2" />
<rect x="290" y="60" width="180" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
<text x="380" y="83" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Reto do Abdome</text>
<text x="380" y="103" text-anchor="middle" font-size="13" fill="#4b5563">(com intersecções tendíneas)</text>
<!-- Oblíquo Externo -->
<line x1="500" y1="90" x2="620" y2="150" stroke="#1f2937" stroke-width="2" />
<rect x="560" y="150" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
<text x="655" y="180" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Oblíquo Externo</text>
<text x="655" y="200" text-anchor="middle" font-size="15" fill="#1f2937">do Abdome</text>
<!-- Oblíquo Interno -->
<line x1="500" y1="250" x2="620" y2="290" stroke="#1f2937" stroke-width="2" />
<rect x="560" y="290" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
<text x="655" y="320" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Oblíquo Interno</text>
<text x="655" y="340" text-anchor="middle" font-size="15" fill="#1f2937">do Abdome</text>
<!-- Transverso do abdome -->
<line x1="489" y1="245" x2="330" y2="330" stroke="#1f2937" stroke-width="2" />
<rect x="150" y="330" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
<text x="245" y="360" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Transverso</text>
<text x="245" y="380" text-anchor="middle" font-size="15" fill="#1f2937">do Abdome</text>
<text x="380" y="463" text-anchor="middle" font-size="12" fill="#6b7280">Corte em degraus mostrando as camadas da parede abdominal —</text>
<text x="380" y="477" text-anchor="middle" font-size="12" fill="#6b7280">da mais superficial (oblíquo externo) à mais profunda (transverso).</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

frontend/public/muscular/parede-abdominal-gray392.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 75 KiB

frontend/public/muscular/serratil-obliquo-digitacoes.svg
+59
View File
@@ -0,0 +1,59 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif">
<rect x="0" y="0" width="760" height="420" fill="#ffffff" />
<!-- Silhueta simplificada do tórax/costelas laterais -->
<path d="M 260 20
C 380 5, 470 15, 540 50
C 570 90, 585 150, 580 220
C 575 290, 545 350, 490 385
C 420 405, 330 400, 270 370
C 230 330, 215 260, 220 190
C 225 120, 235 60, 260 20 Z"
fill="#f0c9a0" stroke="#c9915c" stroke-width="2" />
<!-- Costelas (linhas curvas de referência) -->
<g stroke="#c9915c" stroke-width="2" fill="none" opacity="0.55">
<path d="M 250 70 C 320 55, 420 55, 500 75" />
<path d="M 240 110 C 320 92, 440 92, 520 115" />
<path d="M 232 150 C 320 130, 450 130, 535 155" />
</g>
<!-- Serrátil anterior — digitações (triângulos) vindo de cima/lateral -->
<g fill="#d9573f" stroke="#8f3423" stroke-width="1.8">
<path d="M 300 90 L 340 190 L 260 190 Z" />
<path d="M 370 95 L 400 195 L 330 195 Z" />
<path d="M 440 105 L 460 200 L 400 200 Z" />
<path d="M 500 120 L 505 205 L 460 205 Z" />
</g>
<!-- Oblíquo externo — digitações interdigitando por baixo, entrelaçando -->
<g fill="#e8865f" stroke="#8f3423" stroke-width="1.8">
<path d="M 275 190 L 320 190 L 300 300 Z" />
<path d="M 335 195 L 380 195 L 360 320 Z" />
<path d="M 405 200 L 445 200 L 425 335 Z" />
<path d="M 465 205 L 505 205 L 490 340 Z" />
</g>
<!-- corpo do oblíquo externo, abaixo das digitações -->
<path d="M 265 300 C 340 285, 430 285, 500 305 C 500 340, 480 375, 430 390 C 370 400, 310 395, 275 370 C 255 345, 258 320, 265 300 Z"
fill="#e8865f" stroke="#8f3423" stroke-width="2" />
<g stroke="#8f3423" stroke-width="1.4" opacity="0.5">
<line x1="290" y1="310" x2="320" y2="380" />
<line x1="330" y1="300" x2="360" y2="385" />
<line x1="370" y1="295" x2="400" y2="390" />
<line x1="410" y1="295" x2="440" y2="385" />
<line x1="450" y1="300" x2="470" y2="375" />
</g>
<!-- Rótulos -->
<line x1="380" y1="130" x2="380" y2="70" stroke="#1f2937" stroke-width="2" />
<rect x="285" y="14" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
<text x="380" y="37" text-anchor="middle" font-size="19" font-weight="600" fill="#1f2937">Serrátil Anterior</text>
<text x="380" y="57" text-anchor="middle" font-size="13" fill="#4b5563">(digitações nas costelas)</text>
<line x1="420" y1="330" x2="560" y2="330" stroke="#1f2937" stroke-width="2" />
<rect x="560" y="302" width="190" height="56" rx="10" fill="#ffffff" stroke="#1f2937" stroke-width="2" />
<text x="655" y="326" text-anchor="middle" font-size="18" font-weight="600" fill="#1f2937">Oblíquo Externo</text>
<text x="655" y="346" text-anchor="middle" font-size="14" fill="#1f2937">do Abdome</text>
<text x="380" y="410" text-anchor="middle" font-size="12" fill="#6b7280">As digitações dos dois músculos se entrelaçam nas costelas, como os dedos de duas mãos.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

frontend/src/components/StructureInfoPanel.tsx
+9 -10
View File
@@ -1,6 +1,6 @@
import { useAtlasStore } from "../store/useAtlasStore.js";
import type { Structure } from "../lib/api.js";
import { MUSCLE_REFERENCE_IMAGE, hasMuscleReferenceImage } from "../data/muscleReferenceImages.js";
import { muscleReferenceImageFor } from "../data/muscleReferenceImages.js";
export function StructureInfoPanel({
bySlug,
@@ -60,17 +60,16 @@ export function StructureInfoPanel({
<p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
)}
{hasMuscleReferenceImage(structure.slug) && (
{(() => {
const ref = muscleReferenceImageFor(structure.slug);
if (!ref) return null;
return (
<div className="rounded-lg border border-white/10 bg-white p-2">
<img
src={MUSCLE_REFERENCE_IMAGE.image}
alt="Ilustração clássica da parede abdominal mostrando reto do abdome, oblíquo externo e serrátil anterior"
className="w-full h-auto rounded"
/>
<p className="text-xs text-slate-600 mt-2 leading-snug">{MUSCLE_REFERENCE_IMAGE.caption}</p>
<p className="text-[11px] text-slate-500 mt-1">{MUSCLE_REFERENCE_IMAGE.credit}</p>
<img src={ref.image} alt={ref.caption} className="w-full h-auto rounded" />
<p className="text-xs text-slate-600 mt-2 leading-snug">{ref.caption}</p>
</div>
)}
);
})()}
{structure.regionPath.length > 0 && (
<p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>
frontend/src/data/muscleReferenceImages.ts
+35 -20
View File
@@ -1,26 +1,41 @@
// Referência visual 2D pra músculos cuja malha 3D real (Z-Anatomy) não tem
// as subdivisões que a ilustração clássica de anatomia mostra — reto do
// abdome (intersecções tendíneas, o "tanquinho"), serrátil anterior e
// oblíquo externo do abdome (digitações que se entrelaçam nas costelas).
// Confirmamos (comparando com a exportação bruta do Z-Anatomy E com o app
// oficial completo, não só a amostra do GitHub) que essa é uma limitação
// real do dado de origem, não um bug do pipeline — ver extract-manifest.mjs.
// Em vez de tentar esculpir essas divisões em cima de uma malha que não as
// tem, mostramos a prancha clássica de Gray's Anatomy (Henry Vandyke
// Carter, 1918 — domínio público, sem restrição de uso) que já ilustra
// exatamente essas três estruturas e como se relacionam.
export const MUSCLE_REFERENCE_IMAGE = {
image: "/muscular/parede-abdominal-gray392.png",
credit:
"Henry Vandyke Carter, em Henry Gray, Anatomy of the Human Body (1918) — domínio público (via Wikimedia Commons).",
// as subdivisões que os livros de anatomia mostram: as 4 camadas da parede
// abdominal (reto, oblíquo externo, oblíquo interno, transverso — cada uma
// aparece como uma superfície única e lisa no modelo 3D, sem a
// sobreposição em camadas de verdade) e a interdigitação entre serrátil
// anterior e oblíquo externo nas costelas. Confirmamos (comparando com a
// exportação bruta do Z-Anatomy E com o app oficial completo, não só a
// amostra do GitHub) que essa é uma limitação real do dado de origem, não
// um bug do pipeline — ver extract-manifest.mjs.
//
// Em vez de usar uma imagem de terceiros (a primeira tentativa, a prancha
// de Gray's Anatomy, saiu com o texto em latim pequeno demais pra ler),
// essas são ilustrações esquemáticas PRÓPRIAS em SVG — texto vetorial de
// verdade (nunca sai ilegível ou embaralhado, porque não é imagem
// rasterizada), em português, sem depender de licença de terceiros.
const ABDOMINAL_LAYERS = {
image: "/muscular/parede-abdominal-camadas.svg",
caption:
"No modelo 3D esses três músculos aparecem como superfícies únicas e lisas (o Z-Anatomy não modela essas subdivisões). Esta ilustração clássica mostra onde fica cada um e como se relacionam de verdade.",
"No modelo 3D cada um desses músculos aparece como uma superfície única e lisa (o Z-Anatomy não modela a sobreposição real). Este esquema mostra as 4 camadas da parede abdominal, da mais superficial (oblíquo externo) à mais profunda (transverso).",
};
// Substrings do slug (sem o prefixo de sistema nem o sufixo de lado) que
// identificam um músculo coberto por essa referência.
const MUSCLE_REFERENCE_KEYS = ["rectus-abdominis-muscle", "serratus-anterior-muscle", "external-abdominal-oblique-muscle"];
const SERRATUS_OBLIQUE_DIGITATIONS = {
image: "/muscular/serratil-obliquo-digitacoes.svg",
caption:
"No modelo 3D o serrátil anterior e o oblíquo externo aparecem sem esse encaixe (o Z-Anatomy não modela a interdigitação). Este esquema mostra como as digitações dos dois se entrelaçam nas costelas.",
};
export function hasMuscleReferenceImage(slug: string): boolean {
return MUSCLE_REFERENCE_KEYS.some((key) => slug.includes(key));
// Substring do slug (sem o prefixo de sistema nem o sufixo de lado) →
// referência aplicável.
const MUSCLE_REFERENCE_MAP: Record<string, typeof ABDOMINAL_LAYERS> = {
"rectus-abdominis-muscle": ABDOMINAL_LAYERS,
"external-abdominal-oblique-muscle": ABDOMINAL_LAYERS,
"internal-abdominal-oblique-muscle": ABDOMINAL_LAYERS,
"transversus-abdominis-muscle": ABDOMINAL_LAYERS,
"serratus-anterior-muscle": SERRATUS_OBLIQUE_DIGITATIONS,
};
export function muscleReferenceImageFor(slug: string) {
const key = Object.keys(MUSCLE_REFERENCE_MAP).find((k) => slug.includes(k));
return key ? MUSCLE_REFERENCE_MAP[key] : null;
}