Spaces:

PrompTartLAB
/

Decomate

Sleeping

App Files Files Community

aeolian83 commited on Aug 15

Commit

be098c2

1 Parent(s): 0c0232f

preview & high light

Browse files

Files changed (1) hide show

app.py +257 -49

app.py CHANGED Viewed

@@ -8,6 +8,7 @@ from utils import svg_to_png_base64
 import pathlib
 from logger import setup_logger
 import html
 load_dotenv(override=True)
 logger = setup_logger()
@@ -79,13 +80,8 @@ class SVGAnimationGenerator:
                     },
                     {
                         "role": "assistant",
-                        "content": [
-                            {
-                                "type": "text",
-                                "text": "<animation_plan>"
-                            }
-                        ]
-                    }
                 ],
             )
             response_text = response.content[0].text
@@ -160,13 +156,15 @@ class SVGAnimationGenerator:
             if decomposed_svg_match and animation_suggestions_match:
                 decomposed_svg_text = decomposed_svg_match.group(1).strip()
                 animation_suggestions = animation_suggestions_match.group(1).strip()
                 # Create viewer HTML with XSS protection
                 viewer_html = create_svg_viewer_html(decomposed_svg_text)
                 return decomposed_svg_text, animation_suggestions, viewer_html
             else:
-                error_message = "Decomposed SVG and Animation Suggestion not found in response."
                 error_html = create_error_html(error_message)
                 return "", "", error_html
         except Exception as e:
@@ -189,7 +187,7 @@ class SVGAnimationGenerator:
                 )
                 response_text = response.content[0].text
                 logger.info(f"Model Response:\n{response_text}")
                 # Extract HTML content from Claude's response
                 html_match = re.search(
                     r"<html_output>(.*?)</html_output>", response_text, re.DOTALL
@@ -208,6 +206,35 @@ class SVGAnimationGenerator:
             return f"<html><body><h3>{error_msg}</h3></body></html>", ""
 generator = SVGAnimationGenerator()
@@ -222,28 +249,207 @@ def create_error_html(message: str) -> str:
 def create_svg_viewer_html(svg_content: str) -> str:
-    """Create SVG viewer HTML."""
-    # Basic SVG validation - ensure it starts with <svg and ends with </svg>
-    svg_content = svg_content.strip()
-    if not svg_content.startswith('<svg') or not svg_content.endswith('</svg>'):
         return create_error_html("Invalid SVG format")
     return f"""
-    <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
-        <div style='display: block; align-items: center; margin-bottom: 10px;'>
-        </div>
-        <div id='animation-container' style='min-height: 300px; display: flex; justify-content: center; align-items: center; background: #fafafa; border-radius: 4px; padding: 20px;'>
-            {svg_content}
-        </div>
     </div>
     """
 def process_svg(svg_file):
     if svg_file is None:
         return "Please upload an SVG file"
     try:
-        with open(svg_file, "r", encoding="utf-8") as f:
             svg_content = f.read()
         parsed_svg = generator.parse_svg(svg_content)
         return parsed_svg.get("svg_content", "")
@@ -290,10 +496,10 @@ def predict_decompose_group(svg_file, svg_text, object_name):
     decomposed_svg_viewer = create_svg_viewer_html(decomposed_svg)
     return (
-        decomposed_svg,          # For svg_content_hidden
-        decomposed_svg,          # For groups_summary (분석 결과 표시)
-        animation_suggestions,   # For animation_suggestion
-        decomposed_svg_viewer,   # For decomposed_svg_viewer
     )
@@ -301,10 +507,10 @@ def update_preview_from_html(html_content: str) -> str:
     """Update animation preview from manually edited HTML content."""
     if not html_content.strip():
         return create_error_html("⚠️ HTML content is empty")
     try:
         # Create iframe HTML - only escape quotes for srcdoc attribute
-        safe_html_content = html_content.replace('"', '&quot;')
         preview_html = f"""
         <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
             <div style='display: block; align-items: center; margin-bottom: 10px;'>
@@ -320,7 +526,7 @@ def update_preview_from_html(html_content: str) -> str:
         </div>
         """
         return preview_html
     except Exception as e:
         return create_error_html(f"❌ Error updating preview: {str(e)}")
@@ -336,8 +542,10 @@ def create_animation_preview(animation_desc: str, svg_content: str) -> tuple:
         return error_html, ""
     try:
-        animation_response, html_content = generator.generate_animation(animation_desc, svg_content)
         if not html_content:
             error_html = create_error_html("❌ Failed to generate animation HTML")
             return error_html, animation_response
@@ -351,7 +559,7 @@ def create_animation_preview(animation_desc: str, svg_content: str) -> tuple:
         print(f"Animation preview saved to: {html_path}")
         # Create iframe HTML - only escape quotes for srcdoc attribute
-        safe_html_content = html_content.replace('"', '&quot;')
         preview_html = f"""
         <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
             <div style='display: block; align-items: center; margin-bottom: 10px;'>
@@ -365,9 +573,9 @@ def create_animation_preview(animation_desc: str, svg_content: str) -> tuple:
             </div>
         </div>
         """
         return preview_html, html_content
     except Exception as e:
         error_html = create_error_html(f"❌ Error creating animation: {str(e)}")
         return error_html, ""
@@ -497,7 +705,7 @@ with demo:
         """,
                 )
-    with gr.Column():
         with gr.Row(scale=1):
             with gr.Column(scale=1):
                 gr.Markdown("## 📂 HTML Output")
@@ -513,26 +721,26 @@ with demo:
         fn=predict_decompose_group,
         inputs=[svg_file, svg_text, object_name],
         outputs=[
-            svg_content_hidden,    # Store decomposed SVG for later use
-            groups_summary,        # Show analysis results
             animation_suggestion,  # Show animation suggestions
-            decomposed_svg_viewer, # Show SVG preview
         ],
     )
     groups_feedback_btn.click(
         fn=generator.feedback_decompose_group,
         inputs=[
-            svg_content_hidden,    # Pass the SVG content directly
-            groups_feedback,       # Pass the feedback text
         ],
         outputs=[
-            svg_content_hidden,    # Update hidden SVG content
             animation_suggestion,  # Update animation suggestions
-            decomposed_svg_viewer, # Update SVG preview
         ],
     )
     animate_btn.click(
         fn=create_animation_preview,
         inputs=[
@@ -540,11 +748,11 @@ with demo:
             svg_content_hidden,
         ],
         outputs=[
-            animation_preview,     # Animation preview HTML
-            output_html,          # Raw HTML output
         ],
     )
     # Real-time preview update when HTML is manually edited
     output_html.change(
         fn=update_preview_from_html,
@@ -553,4 +761,4 @@ with demo:
     )
 if __name__ == "__main__":
-    demo.launch(share=True)

 import pathlib
 from logger import setup_logger
 import html
+import uuid
 load_dotenv(override=True)
 logger = setup_logger()
                     },
                     {
                         "role": "assistant",
+                        "content": [{"type": "text", "text": "<animation_plan>"}],
+                    },
                 ],
             )
             response_text = response.content[0].text
             if decomposed_svg_match and animation_suggestions_match:
                 decomposed_svg_text = decomposed_svg_match.group(1).strip()
                 animation_suggestions = animation_suggestions_match.group(1).strip()
                 # Create viewer HTML with XSS protection
                 viewer_html = create_svg_viewer_html(decomposed_svg_text)
                 return decomposed_svg_text, animation_suggestions, viewer_html
             else:
+                error_message = (
+                    "Decomposed SVG and Animation Suggestion not found in response."
+                )
                 error_html = create_error_html(error_message)
                 return "", "", error_html
         except Exception as e:
                 )
                 response_text = response.content[0].text
                 logger.info(f"Model Response:\n{response_text}")
                 # Extract HTML content from Claude's response
                 html_match = re.search(
                     r"<html_output>(.*?)</html_output>", response_text, re.DOTALL
             return f"<html><body><h3>{error_msg}</h3></body></html>", ""
+def _sanitize_svg(svg: str) -> str:
+    """안전한 미리보기를 위해 script 태그/inline on* 핸들러 제거"""
+    # <script>...</script> 제거
+    svg = re.sub(r"<\s*script\b[^>]*>.*?<\s*/\s*script\s*>", "", svg, flags=re.I | re.S)
+    # onload, onclick 등 inline 핸들러 제거
+    svg = re.sub(r"\son[a-zA-Z]+\s*=\s*(['\"]).*?\1", "", svg, flags=re.I | re.S)
+    return svg
+def _fix_svg_markup(svg: str) -> str:
+    """뷰어에 맞게 SVG 속성 정리(크기/비율/문제 스타일 수정)"""
+    s = svg
+    # preserveAspectRatio 보정
+    s = s.replace('preserveAspectRatio="none"', 'preserveAspectRatio="xMidYMid meet"')
+    # position:absolute 등 문제 스타일 제거/대체
+    s = s.replace(
+        'style="display: block; overflow: hidden; position: absolute; left: 0px; top: 0px;"',
+        'style="display:block; width:100%; height:100%;"',
+    )
+    # width/height 절대값 → 상대값
+    s = re.sub(r'width="[^"]+"', 'width="100%"', s, count=1)
+    s = re.sub(r'height="[^"]+"', 'height="100%"', s, count=1)
+    return s
 generator = SVGAnimationGenerator()
 def create_svg_viewer_html(svg_content: str) -> str:
+    """Decomposed SVG를 인터랙티브(외곽선 하이라이트/툴팁) 미리보기로 iframe에서 렌더링"""
+    svg = (svg_content or "").strip()
+    if not (svg.startswith("<svg") and svg.endswith("</svg>")):
         return create_error_html("Invalid SVG format")
+    svg = _sanitize_svg(svg)
+    svg = _fix_svg_markup(svg)
+    uid = f"svg-preview-{uuid.uuid4().hex}"
+    doc = f"""<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    :root {{
+      --hl-color: #ff3b30;   /* 🔧 원하는 색으로 바꿔도 됨 */
+      --hl-width: 3.5px;
+    }}
+    #{uid} svg {{
+      max-width: 100%;
+      max-height: 100%;
+      display: block;
+    }}
+    /* 포인터 이벤트는 도형 요소만 */
+    #{uid} svg g,
+    #{uid} svg path,
+    #{uid} svg rect,
+    #{uid} svg circle,
+    #{uid} svg ellipse,
+    #{uid} svg polygon,
+    #{uid} svg polyline,
+    #{uid} svg line,
+    #{uid} svg text {{
+      cursor: pointer;
+      pointer-events: visiblePainted;
+      transition: filter .12s ease, stroke-width .12s ease;
+    }}
+    /* 보조 요소는 포인터/효과 제외 */
+    #{uid} svg defs,
+    #{uid} svg clipPath,
+    #{uid} svg mask,
+    #{uid} svg title,
+    #{uid} svg desc {{
+      pointer-events: none !important;
+    }}
+    /* ✅ 외곽선 하이라이트: 기존 stroke가 있어��� 강제로 덮어쓰기 */
+    #{uid} .hl {{
+      stroke: var(--hl-color) !important;
+      stroke-width: var(--hl-width) !important;
+      paint-order: stroke fill;                 /* stroke를 위로 */
+      vector-effect: non-scaling-stroke;
+      filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
+    }}
+    /* 필요하다면 다른 요소 미세 디밍 (기본 OFF) */
+    /* #{uid} .dim {{ opacity: .65; }} */
+    #{uid}-wrap {{
+      position:relative; padding:20px; background:#fff;
+      border:1px solid #eee; border-radius:8px; height:100%; box-sizing:border-box;
+    }}
+    #{uid} {{
+      border:1px solid #ddd; border-radius:8px; background:#fafafa;
+      height:100%; min-height:360px; display:flex; align-items:center;
+      justify-content:center; padding:20px; position:relative; box-sizing:border-box;
+    }}
+    #{uid}-tooltip {{
+      position: absolute; display: none; pointer-events: none;
+      background: rgba(0,0,0,0.9); color: #fff; border: 2px solid #fff;
+      border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600;
+      white-space: nowrap; z-index: 10;
+    }}
+  </style>
+</head>
+<body style="margin:0;height:100vh;">
+  <div id="{uid}-wrap">
+    <div id="{uid}" class="svg-container">
+      {svg}
+      <div class="tooltip" id="{uid}-tooltip"></div>
+    </div>
+  </div>
+  <script>
+    (function() {{
+      const root = document.getElementById("{uid}");
+      if (!root) return;
+      const svg = root.querySelector("svg");
+      if (!svg) return;
+      const tooltip = document.getElementById("{uid}-tooltip");
+      const GEOM_SEL = "g,path,rect,circle,ellipse,polygon,polyline,line,text";
+      const DIM_OTHERS = false; // 🔧 true로 바꾸면 나머지 살짝 디밍
+      function allGeom() {{
+        return svg.querySelectorAll(GEOM_SEL);
+      }}
+      function closestWithId(node) {{
+        let cur = node;
+        while (cur && cur !== svg) {{
+          if (cur.id) return cur;
+          cur = cur.parentNode;
+        }}
+        return null;
+      }}
+      function clearMarks() {{
+        svg.querySelectorAll(".hl").forEach(el => el.classList.remove("hl"));
+        if (DIM_OTHERS) svg.querySelectorAll(".dim").forEach(el => el.classList.remove("dim"));
+      }}
+      function highlightOwner(owner) {{
+        // 그룹이면 하위 도형 전체에 hl, 도형이면 자기 자신에만
+        const targets = owner.matches(GEOM_SEL)
+          ? [owner, ...owner.querySelectorAll(GEOM_SEL)]
+          : [...owner.querySelectorAll(GEOM_SEL)];
+        targets.forEach(el => el.classList.add("hl"));
+      }}
+      function dimExcept(owner) {{
+        if (!DIM_OTHERS) return;
+        const keep = new Set([owner, ...owner.querySelectorAll(GEOM_SEL)]);
+        allGeom().forEach(el => {{
+          if (!keep.has(el)) el.classList.add("dim");
+        }});
+      }}
+      function moveTooltip(e) {{
+        const rect = root.getBoundingClientRect();
+        tooltip.style.left = (e.clientX - rect.left + 10) + "px";
+        tooltip.style.top  = (e.clientY - rect.top  + 10) + "px";
+      }}
+      svg.addEventListener("pointerover", (e) => {{
+        const owner = closestWithId(e.target);
+        clearMarks();
+        if (owner && owner.id) {{
+          highlightOwner(owner);
+          dimExcept(owner);
+          tooltip.textContent = owner.id;
+          tooltip.style.display = "block";
+          moveTooltip(e);
+        }} else {{
+          tooltip.style.display = "none";
+        }}
+      }});
+      svg.addEventListener("pointermove", (e) => {{
+        if (tooltip.style.display === "block") moveTooltip(e);
+      }});
+      svg.addEventListener("pointerleave", () => {{
+        clearMarks();
+        tooltip.style.display = "none";
+      }});
+    }})();
+  </script>
+</body>
+</html>
+"""
+    safe_doc = doc.replace('"', "&quot;")
     return f"""
+    <div style="width:100%; height:520px;">
+      <iframe
+        srcdoc="{safe_doc}"
+        width="100%"
+        height="100%"
+        style="border:none; border-radius:8px; overflow:hidden;"
+        sandbox="allow-scripts allow-same-origin">
+      </iframe>
     </div>
     """
+def _extract_path_from_gradio_file(svg_file) -> str | None:
+    # gr.File 값이 문자열 경로인 경우
+    if isinstance(svg_file, (str, pathlib.Path)):
+        return str(svg_file)
+    # dict 형태({ 'name': '/tmp/...' })로 들어오는 경우
+    if isinstance(svg_file, dict) and "name" in svg_file:
+        return svg_file["name"]
+    # NamedString 등 파일 객체에 name 속성이 있는 경우
+    if hasattr(svg_file, "name"):
+        return svg_file.name
+    return None
 def process_svg(svg_file):
     if svg_file is None:
         return "Please upload an SVG file"
     try:
+        path = _extract_path_from_gradio_file(svg_file)
+        if not path:
+            return "Invalid file input. Please upload a valid SVG file."
+        with open(path, "r", encoding="utf-8") as f:
             svg_content = f.read()
         parsed_svg = generator.parse_svg(svg_content)
         return parsed_svg.get("svg_content", "")
     decomposed_svg_viewer = create_svg_viewer_html(decomposed_svg)
     return (
+        decomposed_svg,  # For svg_content_hidden
+        decomposed_svg,  # For groups_summary (분석 결과 표시)
+        animation_suggestions,  # For animation_suggestion
+        decomposed_svg_viewer,  # For decomposed_svg_viewer
     )
     """Update animation preview from manually edited HTML content."""
     if not html_content.strip():
         return create_error_html("⚠️ HTML content is empty")
     try:
         # Create iframe HTML - only escape quotes for srcdoc attribute
+        safe_html_content = html_content.replace('"', "&quot;")
         preview_html = f"""
         <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
             <div style='display: block; align-items: center; margin-bottom: 10px;'>
         </div>
         """
         return preview_html
     except Exception as e:
         return create_error_html(f"❌ Error updating preview: {str(e)}")
         return error_html, ""
     try:
+        animation_response, html_content = generator.generate_animation(
+            animation_desc, svg_content
+        )
         if not html_content:
             error_html = create_error_html("❌ Failed to generate animation HTML")
             return error_html, animation_response
         print(f"Animation preview saved to: {html_path}")
         # Create iframe HTML - only escape quotes for srcdoc attribute
+        safe_html_content = html_content.replace('"', "&quot;")
         preview_html = f"""
         <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
             <div style='display: block; align-items: center; margin-bottom: 10px;'>
             </div>
         </div>
         """
         return preview_html, html_content
     except Exception as e:
         error_html = create_error_html(f"❌ Error creating animation: {str(e)}")
         return error_html, ""
         """,
                 )
+    with gr.Column():
         with gr.Row(scale=1):
             with gr.Column(scale=1):
                 gr.Markdown("## 📂 HTML Output")
         fn=predict_decompose_group,
         inputs=[svg_file, svg_text, object_name],
         outputs=[
+            svg_content_hidden,  # Store decomposed SVG for later use
+            groups_summary,  # Show analysis results
             animation_suggestion,  # Show animation suggestions
+            decomposed_svg_viewer,  # Show SVG preview
         ],
     )
     groups_feedback_btn.click(
         fn=generator.feedback_decompose_group,
         inputs=[
+            svg_content_hidden,  # Pass the SVG content directly
+            groups_feedback,  # Pass the feedback text
         ],
         outputs=[
+            svg_content_hidden,  # Update hidden SVG content
             animation_suggestion,  # Update animation suggestions
+            decomposed_svg_viewer,  # Update SVG preview
         ],
     )
     animate_btn.click(
         fn=create_animation_preview,
         inputs=[
             svg_content_hidden,
         ],
         outputs=[
+            animation_preview,  # Animation preview HTML
+            output_html,  # Raw HTML output
         ],
     )
     # Real-time preview update when HTML is manually edited
     output_html.change(
         fn=update_preview_from_html,
     )
 if __name__ == "__main__":
+    demo.launch(share=True)