qr

Running

App Files Files Community

seawolf2357 commited on Dec 31, 2025

Commit

5fa2101

verified ·

1 Parent(s): 7fd946e

Update app.py

Browse files

Files changed (1) hide show

app.py +572 -102

app.py CHANGED Viewed

@@ -15,7 +15,7 @@ def create_border_decoration(qr_image, decoration_style="Flowers"):
     width, height = qr_image.size
     # 패딩을 더 작게 조정
-    padding = 20  # 패딩을 30에서 20으로 줄임
     new_width = width + (padding * 2)
     new_height = height + (padding * 2)
@@ -28,9 +28,9 @@ def create_border_decoration(qr_image, decoration_style="Flowers"):
     # Get draw object
     draw = ImageDraw.Draw(decorated_image)
-    # 장식 크기 설정 - 간격을 더 좁게
-    deco_size = 8  # 장식 크기를 12에서 8로 줄임
-    gap = deco_size * 1.5  # 간격을 2배에서 1.5배로 줄임
     # 테두리를 따라 점들의 위치 계산
     border_points = []
@@ -53,85 +53,75 @@ def create_border_decoration(qr_image, decoration_style="Flowers"):
     # 각 스타일에 따른 장식 그리기
     for x, y in border_points:
-        if decoration_style == "Flowers":  # 꽃 패턴
-            # 꽃잎
             for angle in range(0, 360, 45):
                 x1 = x + deco_size * cos(radians(angle))
                 y1 = y + deco_size * sin(radians(angle))
                 draw.ellipse([x1-4, y1-4, x1+4, y1+4], fill='pink')
-            # 꽃 중심
             draw.ellipse([x-3, y-3, x+3, y+3], fill='yellow')
-        elif decoration_style == "Hearts":  # 하트 패턴
-            # 작은 하트들을 연속으로 그리기
             heart_size = 6
             draw.ellipse([x-heart_size, y-heart_size, x, y], fill='red')
             draw.ellipse([x, y-heart_size, x+heart_size, y], fill='red')
             draw.polygon([(x-heart_size, y), (x+heart_size, y), (x, y+heart_size)], fill='red')
-        elif decoration_style == "Waves":  # 웨이브 패턴
             wave_size = 10
             draw.arc([x-wave_size, y-wave_size//2, x+wave_size, y+wave_size//2],
                     0, 180, fill='lightblue', width=2)
             draw.arc([x-wave_size, y, x+wave_size, y+wave_size],
                     0, 180, fill='blue', width=2)
-        elif decoration_style == "Leaves":  # 잎 패턴
             leaf_size = 8
-            # 메인 잎
             draw.ellipse([x-leaf_size, y-leaf_size//2, x+leaf_size, y+leaf_size//2],
                         fill='lightgreen')
-            # 작은 잎
             draw.ellipse([x-leaf_size//2, y-leaf_size, x+leaf_size//2, y+leaf_size],
                         fill='darkgreen')
-        elif decoration_style == "Stars":  # 별 패턴
             star_size = 6
             points = []
             for i in range(5):
                 angle = i * 72
-                # 외곽 점
                 x1 = x + star_size * cos(radians(angle))
                 y1 = y + star_size * sin(radians(angle))
                 points.append((x1, y1))
-                # 내부 점
                 x2 = x + (star_size/2) * cos(radians(angle + 36))
                 y2 = y + (star_size/2) * sin(radians(angle + 36))
                 points.append((x2, y2))
             draw.polygon(points, fill='gold')
-        elif decoration_style == "Chains":  # 체인 패턴
             chain_size = 8
             draw.ellipse([x-chain_size, y-chain_size//2, x+chain_size, y+chain_size//2],
                         outline='gray', width=2)
-        elif decoration_style == "Bubbles":  # 버블 패턴
             bubble_sizes = [6, 4, 2]
             for size in bubble_sizes:
                 draw.ellipse([x-size, y-size, x+size, y+size],
                            outline='skyblue', width=1)
-        elif decoration_style == "Vines":  # 덩굴 패턴
             vine_size = 10
-            # 메인 덩굴
             draw.arc([x-vine_size, y-vine_size, x+vine_size, y+vine_size],
                     0, 180, fill='green', width=2)
-            # 작은 잎
             draw.ellipse([x-3, y-3, x+3, y+3], fill='lightgreen')
-        elif decoration_style == "Diamonds":  # 다이아몬드 패턴
             diamond_size = 6
             points = [
-                (x, y-diamond_size),  # 상단
-                (x+diamond_size, y),  # 우측
-                (x, y+diamond_size),  # 하단
-                (x-diamond_size, y)   # 좌측
             ]
             draw.polygon(points, outline='purple', width=1)
-        elif decoration_style == "Lace":  # 레이스 패턴
             lace_size = 8
-            # 레이스 원형 패턴
             draw.arc([x-lace_size, y-lace_size, x+lace_size, y+lace_size],
                     0, 180, fill='gray', width=1)
             draw.arc([x-lace_size//2, y-lace_size//2, x+lace_size//2, y+lace_size//2],
@@ -142,7 +132,6 @@ def create_border_decoration(qr_image, decoration_style="Flowers"):
 def rgba_to_rgb(rgba_color):
     """Convert RGBA color string to RGB hex color"""
     if rgba_color.startswith('rgba'):
-        # Extract numbers from rgba string
         values = rgba_color.strip('rgba()').split(',')
         r = int(float(values[0]))
         g = int(float(values[1]))
@@ -180,7 +169,7 @@ def create_qr(content, qr_type, fill_color, back_color, box_size, border_size, e
     # QR 이미지 생성
     qr_img = qr.make_image(fill_color=fill_color, back_color=back_color)
-    # Add border decoration if specified and not "No Decoration"
     if border_decoration != "No Decoration":
         qr_img = create_border_decoration(qr_img, border_decoration)
@@ -189,16 +178,32 @@ def create_qr(content, qr_type, fill_color, back_color, box_size, border_size, e
     random_id = random.randint(1000, 9999)
     filename = f"qrfile/qr_{timestamp}_{random_id}.png"
-    # 디렉토리 확인 및 생성
     os.makedirs("qrfile", exist_ok=True)
-    # 이미지 저장
     qr_img.save(filename)
     cleanup_old_files("qrfile/", max_files=100)
-    return filename, formatted_data
-# 데이터 포맷팅 함수
 def format_data(content, qr_type):
     if not content:
         return ""
@@ -217,7 +222,6 @@ def format_data(content, qr_type):
     return format_rules[qr_type](content.strip())
-# 파일 정리 함수
 def cleanup_old_files(directory, max_files):
     files = [f for f in os.listdir(directory) if f.endswith('.png')]
     if len(files) > max_files:
@@ -238,83 +242,514 @@ def format_example_text(qr_type):
         "Location": "• Coordinates: 37.7749,-122.4194\n• With zoom: 37.7749,-122.4194,15z",
         "Wi-Fi": "• Network name only: MyWiFiNetwork\n• With password: WIFI:S:MyNetwork;P:password;;",
         "Text": "• Simple text: Hello World!\n• Multiple lines: Line 1\\nLine 2",
-        "vCard": "• Basic:\nFN:John Doe\nTEL:+1234567890\nEMAIL:john@example.com\n• Extended:\nFN:John Doe\nTEL:+1234567890\nEMAIL:john@example.com\nADR:;;123 Street;City;State;12345;Country"
     }
     return examples.get(qr_type, "Enter your content here...")
-def create_interface():
-    theme = gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="indigo",
-    ).set(
-        body_background_fill="*neutral_50",
-        block_background_fill="*neutral_100",
-        button_primary_background_fill="*primary_500",
-    )
-    with gr.Blocks(theme=theme, title="QR Canvas") as demo:
         gr.Markdown(
             """
-            # 🎯 QR CANVAS+
-            Create customized QR codes for various purposes with professional styling options.
-            """
         )
-        gr.HTML("""<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fginipick-QR-Canvas.hf.space">
-                <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fginipick-QR-Canvas.hf.space&countColor=%23263759" />
-                </a>""")
-        with gr.Row():
-            with gr.Column(scale=2):
                 qr_type = gr.Dropdown(
                     choices=["URL", "Email", "Phone", "SMS", "WhatsApp", "Location", "Wi-Fi", "Text", "vCard"],
                     value="URL",
-                    label="QR Code Type"
                 )
                 content = gr.Textbox(
-                    label="Content",
                     placeholder="Enter your content here...",
                     lines=3
                 )
                 example_format = gr.Textbox(
                     value=format_example_text("URL"),
-                    label="Format Examples",
                     interactive=False,
-                    lines=6
                 )
-                with gr.Row():
                     fill_color = gr.ColorPicker(
-                        label="QR Code Color",
                         value="#000000"
                     )
                     back_color = gr.ColorPicker(
-                        label="Background Color",
                         value="#FFFFFF"
                     )
                 with gr.Row():
                     box_size = gr.Slider(
                         minimum=1,
-                        maximum=30,        # 최대값을 20에서 30으로 증가
-                        value=15,          # 기본값을 10에서 15로 증가
                         step=1,
-                        label="QR Code Size"
                     )
                     border_size = gr.Slider(
                         minimum=0,
-                        maximum=5,         # 최대값을 10에서 5로 감소
-                        value=2,           # 기본값을 4에서 2로 감소
                         step=1,
-                        label="Border Size"
                     )
                 error_correction = gr.Dropdown(
@@ -325,12 +760,12 @@ def create_interface():
                         "High (30%)"
                     ],
                     value="Medium (15%)",
-                    label="Error Correction Level"
                 )
                 border_decoration = gr.Dropdown(
                     choices=[
-                        "No Decoration",  # 명시적인 "장식 없음" 옵션
                         "Flowers",
                         "Hearts",
                         "Waves",
@@ -342,27 +777,77 @@ def create_interface():
                         "Diamonds",
                         "Lace"
                     ],
-                    value="No Decoration",  # 기본값으로 "No Decoration" 설정
-                    label="Border Decoration Style"
                 )
                 generate_btn = gr.Button(
-                    "Generate QR Code",
-                    variant="primary"
                 )
-            with gr.Column(scale=1):
                 output_image = gr.Image(
-                    label="Generated QR Code",
-                    type="filepath"
                 )
                 output_data = gr.Textbox(
-                    label="Formatted Data",
-                    interactive=False
                 )
         def update_example(qr_type):
             return format_example_text(qr_type)
@@ -384,27 +869,12 @@ def create_interface():
                 error_correction,
                 border_decoration
             ],
-            outputs=[output_image, output_data]
-        )
-        gr.Markdown(
-            """
-            ### 📝 Instructions
-            1. Select the QR code type from the dropdown menu
-            2. Enter your content following the format examples shown
-            3. Customize the appearance using the color pickers and sliders
-            4. Click 'Generate QR Code' to create your custom QR code
-            ### 💡 Tips
-            - Use higher error correction levels for better scan reliability
-            - Ensure sufficient contrast between QR code and background colors
-            - Keep the content concise for better readability
-            - Follow the format examples for best results
-            """
         )
     return demo
 if __name__ == "__main__":
     try:
         os.makedirs("qrfile", exist_ok=True)

     width, height = qr_image.size
     # 패딩을 더 작게 조정
+    padding = 20
     new_width = width + (padding * 2)
     new_height = height + (padding * 2)
     # Get draw object
     draw = ImageDraw.Draw(decorated_image)
+    # 장식 크기 설정
+    deco_size = 8
+    gap = deco_size * 1.5
     # 테두리를 따라 점들의 위치 계산
     border_points = []
     # 각 스타일에 따른 장식 그리기
     for x, y in border_points:
+        if decoration_style == "Flowers":
             for angle in range(0, 360, 45):
                 x1 = x + deco_size * cos(radians(angle))
                 y1 = y + deco_size * sin(radians(angle))
                 draw.ellipse([x1-4, y1-4, x1+4, y1+4], fill='pink')
             draw.ellipse([x-3, y-3, x+3, y+3], fill='yellow')
+        elif decoration_style == "Hearts":
             heart_size = 6
             draw.ellipse([x-heart_size, y-heart_size, x, y], fill='red')
             draw.ellipse([x, y-heart_size, x+heart_size, y], fill='red')
             draw.polygon([(x-heart_size, y), (x+heart_size, y), (x, y+heart_size)], fill='red')
+        elif decoration_style == "Waves":
             wave_size = 10
             draw.arc([x-wave_size, y-wave_size//2, x+wave_size, y+wave_size//2],
                     0, 180, fill='lightblue', width=2)
             draw.arc([x-wave_size, y, x+wave_size, y+wave_size],
                     0, 180, fill='blue', width=2)
+        elif decoration_style == "Leaves":
             leaf_size = 8
             draw.ellipse([x-leaf_size, y-leaf_size//2, x+leaf_size, y+leaf_size//2],
                         fill='lightgreen')
             draw.ellipse([x-leaf_size//2, y-leaf_size, x+leaf_size//2, y+leaf_size],
                         fill='darkgreen')
+        elif decoration_style == "Stars":
             star_size = 6
             points = []
             for i in range(5):
                 angle = i * 72
                 x1 = x + star_size * cos(radians(angle))
                 y1 = y + star_size * sin(radians(angle))
                 points.append((x1, y1))
                 x2 = x + (star_size/2) * cos(radians(angle + 36))
                 y2 = y + (star_size/2) * sin(radians(angle + 36))
                 points.append((x2, y2))
             draw.polygon(points, fill='gold')
+        elif decoration_style == "Chains":
             chain_size = 8
             draw.ellipse([x-chain_size, y-chain_size//2, x+chain_size, y+chain_size//2],
                         outline='gray', width=2)
+        elif decoration_style == "Bubbles":
             bubble_sizes = [6, 4, 2]
             for size in bubble_sizes:
                 draw.ellipse([x-size, y-size, x+size, y+size],
                            outline='skyblue', width=1)
+        elif decoration_style == "Vines":
             vine_size = 10
             draw.arc([x-vine_size, y-vine_size, x+vine_size, y+vine_size],
                     0, 180, fill='green', width=2)
             draw.ellipse([x-3, y-3, x+3, y+3], fill='lightgreen')
+        elif decoration_style == "Diamonds":
             diamond_size = 6
             points = [
+                (x, y-diamond_size),
+                (x+diamond_size, y),
+                (x, y+diamond_size),
+                (x-diamond_size, y)
             ]
             draw.polygon(points, outline='purple', width=1)
+        elif decoration_style == "Lace":
             lace_size = 8
             draw.arc([x-lace_size, y-lace_size, x+lace_size, y+lace_size],
                     0, 180, fill='gray', width=1)
             draw.arc([x-lace_size//2, y-lace_size//2, x+lace_size//2, y+lace_size//2],
 def rgba_to_rgb(rgba_color):
     """Convert RGBA color string to RGB hex color"""
     if rgba_color.startswith('rgba'):
         values = rgba_color.strip('rgba()').split(',')
         r = int(float(values[0]))
         g = int(float(values[1]))
     # QR 이미지 생성
     qr_img = qr.make_image(fill_color=fill_color, back_color=back_color)
+    # Add border decoration if specified
     if border_decoration != "No Decoration":
         qr_img = create_border_decoration(qr_img, border_decoration)
     random_id = random.randint(1000, 9999)
     filename = f"qrfile/qr_{timestamp}_{random_id}.png"
     os.makedirs("qrfile", exist_ok=True)
     qr_img.save(filename)
     cleanup_old_files("qrfile/", max_files=100)
+    # 정보 로그 생성
+    info_log = f"""✅ QR CODE GENERATED!
+{'=' * 50}
+📋 QR Code Info:
+   • Type: {qr_type}
+   • Content: {content[:40]}{'...' if len(content) > 40 else ''}
+{'=' * 50}
+🎨 Style Settings:
+   • QR Color: {fill_color}
+   • Background: {back_color}
+   • Size: {box_size}
+   • Border: {border_size}
+   • Decoration: {border_decoration}
+{'=' * 50}
+🔧 Technical:
+   • Error Correction: {error_correction}
+   • Formatted Data: {formatted_data[:50]}{'...' if len(formatted_data) > 50 else ''}
+{'=' * 50}
+💾 Ready to download!"""
+    return filename, formatted_data, info_log
 def format_data(content, qr_type):
     if not content:
         return ""
     return format_rules[qr_type](content.strip())
 def cleanup_old_files(directory, max_files):
     files = [f for f in os.listdir(directory) if f.endswith('.png')]
     if len(files) > max_files:
         "Location": "• Coordinates: 37.7749,-122.4194\n• With zoom: 37.7749,-122.4194,15z",
         "Wi-Fi": "• Network name only: MyWiFiNetwork\n• With password: WIFI:S:MyNetwork;P:password;;",
         "Text": "• Simple text: Hello World!\n• Multiple lines: Line 1\\nLine 2",
+        "vCard": "• Basic:\nFN:John Doe\nTEL:+1234567890\nEMAIL:john@example.com"
     }
     return examples.get(qr_type, "Enter your content here...")
+# ============================================
+# 🎨 Comic Classic Theme - Toon Playground
+# ============================================
+css = """
+/* ===== 🎨 Google Fonts Import ===== */
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
+/* ===== 🎨 Comic Classic 배경 - 빈티지 페이퍼 + 도트 패턴 ===== */
+.gradio-container {
+    background-color: #FEF9C3 !important;
+    background-image:
+        radial-gradient(#1F2937 1px, transparent 1px) !important;
+    background-size: 20px 20px !important;
+    min-height: 100vh !important;
+    font-family: 'Comic Neue', cursive, sans-serif !important;
+}
+/* ===== 허깅페이스 상단 요소 숨김 ===== */
+.huggingface-space-header,
+#space-header,
+.space-header,
+[class*="space-header"],
+.svelte-1ed2p3z,
+.space-header-badge,
+.header-badge,
+[data-testid="space-header"],
+.svelte-kqij2n,
+.svelte-1ax1toq,
+.embed-container > div:first-child {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+/* ===== Footer 완전 숨김 ===== */
+footer,
+.footer,
+.gradio-container footer,
+.built-with,
+[class*="footer"],
+.gradio-footer,
+.main-footer,
+div[class*="footer"],
+.show-api,
+.built-with-gradio,
+a[href*="gradio.app"],
+a[href*="huggingface.co/spaces"] {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+/* ===== 메인 컨테이너 ===== */
+#col-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+/* ===== 🎨 헤더 타이틀 - 코믹 스타일 ===== */
+.header-text h1 {
+    font-family: 'Bangers', cursive !important;
+    color: #1F2937 !important;
+    font-size: 3.5rem !important;
+    font-weight: 400 !important;
+    text-align: center !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow:
+        4px 4px 0px #FACC15,
+        6px 6px 0px #1F2937 !important;
+    letter-spacing: 3px !important;
+    -webkit-text-stroke: 2px #1F2937 !important;
+}
+/* ===== 🎨 서브타이틀 ===== */
+.subtitle {
+    text-align: center !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 1.2rem !important;
+    color: #1F2937 !important;
+    margin-bottom: 1.5rem !important;
+    font-weight: 700 !important;
+}
+/* ===== 🎨 카드/패널 - 만화 프레임 스타일 ===== */
+.gr-panel,
+.gr-box,
+.gr-form,
+.block,
+.gr-group {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    transition: all 0.2s ease !important;
+}
+.gr-panel:hover,
+.block:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 8px 8px 0px #1F2937 !important;
+}
+/* ===== 🎨 입력 필드 (Textbox) ===== */
+textarea,
+input[type="text"],
+input[type="number"] {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 1rem !important;
+    font-weight: 700 !important;
+    transition: all 0.2s ease !important;
+}
+textarea:focus,
+input[type="text"]:focus,
+input[type="number"]:focus {
+    border-color: #3B82F6 !important;
+    box-shadow: 4px 4px 0px #3B82F6 !important;
+    outline: none !important;
+}
+textarea::placeholder {
+    color: #9CA3AF !important;
+    font-weight: 400 !important;
+}
+/* ===== 🎨 드롭다운 스타일 ===== */
+select,
+.gr-dropdown,
+.gr-dropdown select {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    padding: 8px 12px !important;
+    box-shadow: 3px 3px 0px #1F2937 !important;
+    transition: all 0.2s ease !important;
+}
+select:focus,
+.gr-dropdown:focus {
+    border-color: #3B82F6 !important;
+    box-shadow: 4px 4px 0px #3B82F6 !important;
+}
+/* ===== 🎨 Primary 버튼 - 코믹 블루 ===== */
+.gr-button-primary,
+button.primary,
+.gr-button.primary,
+.generate-btn {
+    background: #3B82F6 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
+    font-size: 1.3rem !important;
+    letter-spacing: 2px !important;
+    padding: 14px 28px !important;
+    box-shadow: 5px 5px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+.gr-button-primary:hover,
+button.primary:hover,
+.gr-button.primary:hover,
+.generate-btn:hover {
+    background: #2563EB !important;
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 7px 7px 0px #1F2937 !important;
+}
+.gr-button-primary:active,
+button.primary:active,
+.gr-button.primary:active,
+.generate-btn:active {
+    transform: translate(3px, 3px) !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+}
+/* ===== 🎨 Secondary 버튼 - 코믹 레드 ===== */
+.gr-button-secondary,
+button.secondary {
+    background: #EF4444 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 1px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+.gr-button-secondary:hover,
+button.secondary:hover {
+    background: #DC2626 !important;
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+}
+/* ===== 🎨 로그 출력 영역 ===== */
+.info-log textarea {
+    background: #1F2937 !important;
+    color: #10B981 !important;
+    font-family: 'Courier New', monospace !important;
+    font-size: 0.9rem !important;
+    font-weight: 400 !important;
+    border: 3px solid #10B981 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #10B981 !important;
+}
+/* ===== 🎨 컬러 피커 스타일 ===== */
+.gr-colorpicker,
+input[type="color"] {
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 3px 3px 0px #1F2937 !important;
+    width: 60px !important;
+    height: 40px !important;
+    cursor: pointer !important;
+}
+.gr-colorpicker:hover,
+input[type="color"]:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 5px 5px 0px #1F2937 !important;
+}
+/* ===== 🎨 슬라이더 스타일 ===== */
+input[type="range"] {
+    accent-color: #3B82F6 !important;
+    height: 8px !important;
+}
+.gr-slider {
+    background: #FFFFFF !important;
+}
+/* ===== 🎨 예시 텍스트 박스 ===== */
+.example-box textarea {
+    background: #FEF3C7 !important;
+    border: 2px dashed #F59E0B !important;
+    border-radius: 8px !important;
+    color: #92400E !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 0.9rem !important;
+}
+/* ===== 🎨 QR 코드 출력 영역 ===== */
+.qr-output,
+.gr-image {
+    border: 4px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 8px 8px 0px #1F2937 !important;
+    overflow: hidden !important;
+    background: #FFFFFF !important;
+}
+/* ===== 🎨 아코디언 - 말풍선 스타일 ===== */
+.gr-accordion {
+    background: #FACC15 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+.gr-accordion-header {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1.1rem !important;
+}
+/* ===== 🎨 라벨 스타일 ===== */
+label,
+.gr-input-label,
+.gr-block-label {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+}
+span.gr-label {
+    color: #1F2937 !important;
+}
+/* ===== 🎨 정보 텍스트 ===== */
+.gr-info,
+.info {
+    color: #6B7280 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 0.9rem !important;
+}
+/* ===== 🎨 Instructions 섹션 ===== */
+.instructions-box {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
+    border: 3px solid #3B82F6 !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    margin-top: 1.5rem !important;
+}
+.instructions-box h3 {
+    font-family: 'Bangers', cursive !important;
+    color: #1F2937 !important;
+    font-size: 1.3rem !important;
+    margin-bottom: 0.5rem !important;
+}
+.instructions-box ul,
+.instructions-box ol {
+    font-family: 'Comic Neue', cursive !important;
+    color: #1F2937 !important;
+    font-weight: 700 !important;
+}
+/* ===== 🎨 Tips 섹션 ===== */
+.tips-box {
+    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
+    border: 3px solid #F59E0B !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    margin-top: 1rem !important;
+}
+/* ===== 🎨 스크롤바 - 코믹 스타일 ===== */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+::-webkit-scrollbar-track {
+    background: #FEF9C3;
+    border: 2px solid #1F2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #3B82F6;
+    border: 2px solid #1F2937;
+    border-radius: 0px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #EF4444;
+}
+/* ===== 🎨 선택 하이라이트 ===== */
+::selection {
+    background: #FACC15;
+    color: #1F2937;
+}
+/* ===== 🎨 링크 스타일 ===== */
+a {
+    color: #3B82F6 !important;
+    text-decoration: none !important;
+    font-weight: 700 !important;
+}
+a:hover {
+    color: #EF4444 !important;
+}
+/* ===== 🎨 Row/Column 간격 ===== */
+.gr-row {
+    gap: 1.5rem !important;
+}
+.gr-column {
+    gap: 1rem !important;
+}
+/* ===== 🎨 컬러 피커 Row ===== */
+.color-picker-row {
+    display: flex !important;
+    gap: 1rem !important;
+    align-items: center !important;
+}
+/* ===== 반응형 조정 ===== */
+@media (max-width: 768px) {
+    .header-text h1 {
+        font-size: 2.2rem !important;
+        text-shadow:
+            3px 3px 0px #FACC15,
+            4px 4px 0px #1F2937 !important;
+    }
+    .gr-button-primary,
+    button.primary {
+        padding: 12px 20px !important;
+        font-size: 1.1rem !important;
+    }
+    .gr-panel,
+    .block {
+        box-shadow: 4px 4px 0px #1F2937 !important;
+    }
+}
+/* ===== 🎨 다크모드 비활성화 ===== */
+@media (prefers-color-scheme: dark) {
+    .gradio-container {
+        background-color: #FEF9C3 !important;
+    }
+}
+"""
+def create_interface():
+    with gr.Blocks(fill_height=True, css=css, title="QR Canvas+") as demo:
+        # HOME Badge
+        gr.HTML("""
+            <div style="text-align: center; margin: 20px 0 10px 0;">
+                <a href="https://www.humangen.ai" target="_blank" style="text-decoration: none;">
+                    <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge" alt="HOME">
+                </a>
+            </div>
+        """)
+        # Header Title
         gr.Markdown(
             """
+            # 🎯 QR CANVAS+ GENERATOR 📱
+            """,
+            elem_classes="header-text"
         )
+        gr.Markdown(
+            """
+            <p class="subtitle">🎨 Create customized QR codes with professional styling & decorations! ✨</p>
+            """,
+        )
+        with gr.Row(equal_height=False):
+            # Left column - Input Settings
+            with gr.Column(scale=2, min_width=450):
                 qr_type = gr.Dropdown(
                     choices=["URL", "Email", "Phone", "SMS", "WhatsApp", "Location", "Wi-Fi", "Text", "vCard"],
                     value="URL",
+                    label="📋 QR Code Type"
                 )
                 content = gr.Textbox(
+                    label="✏️ Content",
                     placeholder="Enter your content here...",
                     lines=3
                 )
                 example_format = gr.Textbox(
                     value=format_example_text("URL"),
+                    label="📝 Format Examples",
                     interactive=False,
+                    lines=4,
+                    elem_classes="example-box"
                 )
+                with gr.Row(elem_classes="color-picker-row"):
                     fill_color = gr.ColorPicker(
+                        label="🎨 QR Code Color",
                         value="#000000"
                     )
                     back_color = gr.ColorPicker(
+                        label="🖼️ Background Color",
                         value="#FFFFFF"
                     )
                 with gr.Row():
                     box_size = gr.Slider(
                         minimum=1,
+                        maximum=30,
+                        value=15,
                         step=1,
+                        label="📐 QR Code Size"
                     )
                     border_size = gr.Slider(
                         minimum=0,
+                        maximum=5,
+                        value=2,
                         step=1,
+                        label="🔲 Border Size"
                     )
                 error_correction = gr.Dropdown(
                         "High (30%)"
                     ],
                     value="Medium (15%)",
+                    label="🔧 Error Correction Level"
                 )
                 border_decoration = gr.Dropdown(
                     choices=[
+                        "No Decoration",
                         "Flowers",
                         "Hearts",
                         "Waves",
                         "Diamonds",
                         "Lace"
                     ],
+                    value="No Decoration",
+                    label="🌸 Border Decoration Style"
                 )
                 generate_btn = gr.Button(
+                    "🎯 GENERATE QR CODE! 📱",
+                    variant="primary",
+                    size="lg",
+                    elem_classes="generate-btn"
                 )
+                with gr.Accordion("📜 Generation Log", open=True):
+                    info_log = gr.Textbox(
+                        label="",
+                        placeholder="Enter content and click generate to see info...",
+                        lines=14,
+                        max_lines=20,
+                        interactive=False,
+                        elem_classes="info-log"
+                    )
+            # Right column - Output
+            with gr.Column(scale=1, min_width=350):
                 output_image = gr.Image(
+                    label="🖼️ Generated QR Code",
+                    type="filepath",
+                    height=400,
+                    elem_classes="qr-output"
                 )
                 output_data = gr.Textbox(
+                    label="📄 Formatted Data",
+                    interactive=False,
+                    lines=2
+                )
+                gr.Markdown(
+                    """
+                    <p style="text-align: center; margin-top: 15px; font-weight: 700; color: #1F2937;">
+                        💡 Right-click on the QR code to save!
+                    </p>
+                    """
                 )
+        # Instructions Section
+        gr.Markdown(
+            """
+            <div class="instructions-box">
+                <h3>📝 INSTRUCTIONS</h3>
+                <ol>
+                    <li>Select the QR code type from the dropdown menu</li>
+                    <li>Enter your content following the format examples shown</li>
+                    <li>Customize the appearance using the color pickers and sliders</li>
+                    <li>Choose a border decoration style (optional)</li>
+                    <li>Click 'GENERATE QR CODE' to create your custom QR code</li>
+                </ol>
+            </div>
+            <div class="tips-box">
+                <h3>💡 TIPS</h3>
+                <ul>
+                    <li>Use higher error correction levels for better scan reliability</li>
+                    <li>Ensure sufficient contrast between QR code and background colors</li>
+                    <li>Keep the content concise for better readability</li>
+                    <li>Follow the format examples for best results</li>
+                </ul>
+            </div>
+            """
+        )
+        # Event handlers
         def update_example(qr_type):
             return format_example_text(qr_type)
                 error_correction,
                 border_decoration
             ],
+            outputs=[output_image, output_data, info_log]
         )
     return demo
 if __name__ == "__main__":
     try:
         os.makedirs("qrfile", exist_ok=True)