feat: enhance features with blank mode, answer keys and Chinese font support

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+*.pyc
+.DS_Store
+.env
+venv/

Dockerfile

@@ -1,9 +1,10 @@
 FROM python:3.9-slim
 
-# Install system dependencies (if any)
-# We might need fonts for ReportLab if we want better PDF rendering
+# Install system dependencies
+# fonts-wqy-microhei is a good open source Chinese font
 RUN apt-get update && apt-get install -y \
     fonts-liberation \
+    fonts-wqy-microhei \
     && rm -rf /var/lib/apt/lists/*
 
 # Create user with ID 1000 for Hugging Face Spaces

app.py

@@ -10,135 +10,268 @@ from reportlab.lib.units import cm
 
 app = Flask(__name__)
 
+# --- Font Registration ---
+FONT_NAME = "Helvetica" # Default fallback
+CN_FONT_NAME = None
+
+def register_fonts():
+    global FONT_NAME, CN_FONT_NAME
+    # Priority list for Chinese fonts
+    font_paths = [
+        "/usr/share/fonts/truetype/wqy/wqy-microhei.ttc",  # Debian/Ubuntu (Docker)
+        "/usr/share/fonts/truetype/wqy/wqy-zenhei.ttc",
+        "./static/fonts/SimHei.ttf",                       # Local custom
+        "/System/Library/Fonts/STHeiti Light.ttc",         # macOS fallback (optional)
+    ]
+    
+    for path in font_paths:
+        if os.path.exists(path):
+            try:
+                # Try to register. For TTC, usually need to try index 0
+                # If it fails, reportlab might raise error
+                # Note: 'wqy-microhei' is usually "WenQuanYi Micro Hei"
+                font_key = "ChineseFont"
+                pdfmetrics.registerFont(TTFont(font_key, path))
+                CN_FONT_NAME = font_key
+                print(f"Successfully registered Chinese font: {path}")
+                break
+            except Exception as e:
+                print(f"Failed to register font {path}: {e}")
+
+register_fonts()
+
 # --- Math Logic ---
 
-def generate_problem(ops, min_val, max_val, allow_remainder=False, no_negative=True):
+def generate_problem(ops, min_val, max_val, allow_remainder=False, no_negative=True, blank_prob=0):
+    """
+    Generates a single math problem.
+    blank_prob: 0.0 to 1.0, probability of having a blank in operands (e.g. 3 + _ = 5)
+    """
     op = random.choice(ops)
+    question = ""
+    answer = ""
     
+    # 1. Generate Numbers based on Operation
     if op == '+':
         a = random.randint(min_val, max_val)
         b = random.randint(min_val, max_val)
-        # Optional: Limit sum? Let's just keep simple range for operands
         res = a + b
-        return f"{a} + {b} =", res
         
+        # Format: a + b = res
+        # With blank_prob, we might hide a or b
+        if random.random() < blank_prob:
+            # Hide a or b
+            if random.choice([True, False]):
+                question = f"(   ) + {b} = {res}"
+                answer = str(a)
+            else:
+                question = f"{a} + (   ) = {res}"
+                answer = str(b)
+        else:
+            question = f"{a} + {b} ="
+            answer = str(res)
+            
     elif op == '-':
         a = random.randint(min_val, max_val)
         b = random.randint(min_val, max_val)
         if no_negative and a < b:
             a, b = b, a
         res = a - b
-        return f"{a} - {b} =", res
         
+        if random.random() < blank_prob:
+            if random.choice([True, False]):
+                question = f"(   ) - {b} = {res}"
+                answer = str(a)
+            else:
+                question = f"{a} - (   ) = {res}"
+                answer = str(b)
+        else:
+            question = f"{a} - {b} ="
+            answer = str(res)
+            
     elif op == '×':
-        # For multiplication, usually we want smaller range if max_val is huge, 
-        # but let's assume user sets range appropriately (e.g. 1-9 for times table)
         a = random.randint(min_val, max_val)
         b = random.randint(min_val, max_val)
         res = a * b
-        return f"{a} × {b} =", res
         
+        if random.random() < blank_prob:
+            if random.choice([True, False]):
+                question = f"(   ) × {b} = {res}"
+                answer = str(a)
+            else:
+                question = f"{a} × (   ) = {res}"
+                answer = str(b)
+        else:
+            question = f"{a} × {b} ="
+            answer = str(res)
+            
     elif op == '÷':
         b = random.randint(min_val, max_val)
         if b == 0: b = 1
         
         if allow_remainder:
-            a = random.randint(min_val, max_val * 10) # arbitrary scaling
-            res = f"{a//b} ... {a%b}"
-            if a % b == 0: res = str(a // b)
+            # Division with remainder allowed
+            # We construct 'a' such that it might have remainder
+            # But usually we want controlled difficulty.
+            # Let's pick 'res' (quotient) and 'rem' (remainder)
+            quotient = random.randint(min_val, max_val)
+            remainder = random.randint(0, b - 1)
+            a = quotient * b + remainder
+            res = f"{quotient} ... {remainder}" if remainder != 0 else str(quotient)
+            
+            # Blanks in division with remainder is complex, let's skip blanks for remainder mode for simplicity
+            # or only hide dividend/divisor if remainder is 0
+            question = f"{a} ÷ {b} ="
+            answer = str(res)
+            
         else:
-            # Create perfect division
-            res = random.randint(min_val, max_val) # This is the answer
-            a = res * b
-            # Check if 'a' is too big? Let's assume acceptable.
-            # Actually, let's limit 'a' by max_val? 
-            # Better strategy: 
-            # If user says range 1-100. They usually mean operands.
-            # Let's generate factor A and B in range.
-            a_factor = random.randint(min_val, max_val)
-            b_factor = random.randint(min_val, max_val)
-            if b_factor == 0: b_factor = 1
-            product = a_factor * b_factor
-            a = product
-            b = b_factor
-            res = a_factor
+            # Exact division
+            res_val = random.randint(min_val, max_val)
+            a = res_val * b
+            res = str(res_val)
             
-        return f"{a} ÷ {b} =", res
+            if random.random() < blank_prob:
+                if random.choice([True, False]):
+                    question = f"(   ) ÷ {b} = {res}"
+                    answer = str(a)
+                else:
+                    # a / ? = res => ? = a / res
+                    # Avoid division by zero if res is 0
+                    if res_val == 0:
+                         question = f"{a} ÷ {b} =" # Fallback
+                         answer = str(res)
+                    else:
+                        question = f"{a} ÷ (   ) = {res}"
+                        answer = str(b)
+            else:
+                question = f"{a} ÷ {b} ="
+                answer = str(res)
+                
+    return {"question": question, "answer": answer}
 
-def generate_sheet_data(count, ops, min_val, max_val):
+def generate_sheet_data(count, ops, min_val, max_val, blank_prob=0):
     problems = []
     for _ in range(count):
-        p_str, ans = generate_problem(ops, min_val, max_val)
-        problems.append({"question": p_str, "answer": str(ans)})
+        p = generate_problem(ops, min_val, max_val, blank_prob=blank_prob)
+        problems.append(p)
     return problems
 
 # --- PDF Logic ---
 
-def create_pdf(problems, title="口算练习题", with_answers=False):
+def draw_header(c, width, height, margin_y, title):
+    # Use Chinese font if available, else Helvetica
+    title_font = CN_FONT_NAME if CN_FONT_NAME else "Helvetica-Bold"
+    text_font = CN_FONT_NAME if CN_FONT_NAME else "Helvetica"
+    
+    # Title
+    c.setFont(title_font, 24)
+    # If no Chinese font and title contains non-ascii, fallback to English
+    display_title = title
+    if not CN_FONT_NAME and any(ord(char) > 127 for char in title):
+        display_title = "Math Worksheet"
+        
+    c.drawCentredString(width/2, height - margin_y, display_title)
+    
+    # Info Line
+    c.setFont(text_font, 12)
+    info_y = height - margin_y - 1.2*cm
+    
+    if CN_FONT_NAME:
+        c.drawString(2*cm, info_y, "姓名: ______________")
+        c.drawString(width/2 - 2*cm, info_y, "日期: ______________")
+        c.drawString(width - 5*cm, info_y, "用时: ________")
+        c.drawString(width - 2.5*cm, info_y, "分数: ________")
+    else:
+        c.drawString(2*cm, info_y, "Name: ______________   Date: ______________   Time: ______   Score: ______")
+
+def create_pdf(problems, title="口算练习题", with_answers=True, cols=4):
     buffer = io.BytesIO()
     c = canvas.Canvas(buffer, pagesize=A4)
     width, height = A4
     
-    # Simple setup - we don't have Chinese fonts by default in standard docker images usually
-    # But let's try to use standard font or bundled one?
-    # For now, let's use Helvetica for numbers/ops. 
-    # Title might need Chinese. 
-    # STRATEGY: Use a standard font for math. 
-    # If title is Chinese, we need a font.
-    # I will bundle a lightweight font or use built-in if possible. 
-    # Actually, let's assume English title fallback or try to register a font if available.
-    # For HF Spaces, we can download a font. 
-    # Let's keep it simple: Use English Title by default or "Math Worksheet".
-    
-    # Wait, requirement is "Chinese Display". 
-    # I should download a font or use a system one. 
-    # In 'app.py', I'll check for a font file.
-    
-    font_name = "Helvetica"
-    # c.setFont(font_name, 12)
-    
-    # Layout
+    # Config
     margin_x = 2 * cm
     margin_y = 2 * cm
-    cols = 4
-    rows_per_page = 25 # approx
     
+    # Calculate layout
     col_width = (width - 2 * margin_x) / cols
-    row_height = 1.5 * cm
+    row_height = 1.4 * cm
     
-    y = height - margin_y - 2*cm # Start below title
+    # --- Problem Pages ---
     
-    # Draw Title
-    c.setFont("Helvetica-Bold", 24)
-    c.drawCentredString(width/2, height - margin_y, "Math Worksheet")
+    # Draw first header
+    draw_header(c, width, height, margin_y, title)
     
-    c.setFont("Helvetica", 14)
-    c.drawString(margin_x, height - margin_y - 1*cm, "Name: _________________   Date: _________________   Score: ________")
-
-    c.setFont("Helvetica", 16)
+    y_start = height - margin_y - 2.5*cm
+    y = y_start
     
-    x_start = margin_x
+    # Font for problems - Use Helvetica for numbers/symbols as it looks better usually
+    # But if question contains Chinese (not now), we need CN font.
+    # Our questions are "1 + 2 =", pure ascii usually.
+    # But we might have brackets ( ) which are fine.
+    problem_font = "Helvetica" 
+    c.setFont(problem_font, 14)
     
     current_col = 0
-    current_row = 0
     
+    # We might need multiple pages for problems
     for i, p in enumerate(problems):
-        x = x_start + current_col * col_width
-        # y is calculated
+        x = margin_x + current_col * col_width
         
-        q_text = p['question']
-        c.drawString(x, y, q_text)
+        c.drawString(x, y, p['question'])
         
         current_col += 1
         if current_col >= cols:
             current_col = 0
             y -= row_height
             
+        # Check page break
         if y < margin_y:
             c.showPage()
-            y = height - margin_y - 2*cm
-            c.setFont("Helvetica", 16)
+            # New page header (Simplified)
+            y = height - margin_y
+            c.setFont(problem_font, 14)
+            
+    # End of problems
+    c.showPage()
+    
+    # --- Answer Key Page (Optional) ---
+    if with_answers:
+        # Header
+        title_font = CN_FONT_NAME if CN_FONT_NAME else "Helvetica-Bold"
+        c.setFont(title_font, 18)
+        ans_title = "参考答案" if CN_FONT_NAME else "Answer Key"
+        c.drawCentredString(width/2, height - margin_y, ans_title)
+        
+        y = height - margin_y - 1.5*cm
+        c.setFont("Helvetica", 11) # Smaller font for answers
+        
+        # Use more cols for answers to save paper
+        ans_cols = 5
+        ans_col_width = (width - 2 * margin_x) / ans_cols
+        ans_row_height = 0.8 * cm
+        
+        current_col = 0
+        
+        for i, p in enumerate(problems):
+            x = margin_x + current_col * ans_col_width
+            
+            # Format: "1) 15"
+            ans_text = f"{i+1}) {p['answer']}"
+            c.drawString(x, y, ans_text)
             
+            current_col += 1
+            if current_col >= ans_cols:
+                current_col = 0
+                y -= ans_row_height
+                
+            if y < margin_y:
+                c.showPage()
+                y = height - margin_y
+                c.setFont("Helvetica", 11)
+        
+        c.showPage()
+
     c.save()
     buffer.seek(0)
     return buffer
@@ -156,26 +289,24 @@ def preview():
     min_val = int(data.get('min', 1))
     max_val = int(data.get('max', 20))
     ops = data.get('ops', ['+'])
+    blank_prob = float(data.get('blank_prob', 0)) # 0 to 1
     
-    problems = generate_sheet_data(count, ops, min_val, max_val)
+    problems = generate_sheet_data(count, ops, min_val, max_val, blank_prob)
     return jsonify(problems)
 
 @app.route('/api/download', methods=['POST'])
 def download():
-    # In a real app, we might pass params in URL or use a form submit.
-    # For simplicity, let's use JSON -> generate -> return file?
-    # Browsers can't download file from fetch(json) easily without blob handling.
-    # Let's accept query params for GET or handle blob in frontend.
-    # Let's support POST and return blob.
-    
     data = request.json
     count = int(data.get('count', 50))
     min_val = int(data.get('min', 1))
     max_val = int(data.get('max', 20))
     ops = data.get('ops', ['+'])
+    blank_prob = float(data.get('blank_prob', 0))
+    with_answers = data.get('with_answers', False)
+    cols = int(data.get('cols', 4))
     
-    problems = generate_sheet_data(count, ops, min_val, max_val)
-    pdf_buffer = create_pdf(problems)
+    problems = generate_sheet_data(count, ops, min_val, max_val, blank_prob)
+    pdf_buffer = create_pdf(problems, with_answers=with_answers, cols=cols)
     
     return send_file(
         pdf_buffer,

templates/index.html

@@ -14,91 +14,144 @@
             background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
             background-size: 20px 20px;
         }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen text-gray-800">
+<body class="bg-gray-100 min-h-screen text-gray-800 font-sans">
 
-    <div class="container mx-auto px-4 py-8 flex flex-col md:flex-row gap-6 h-screen overflow-hidden">
+    <div class="container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6 h-screen overflow-hidden">
         
         <!-- Sidebar: Settings -->
-        <div class="w-full md:w-1/3 lg:w-1/4 bg-white rounded-2xl shadow-xl p-6 flex flex-col h-full overflow-y-auto">
-            <h1 class="text-2xl font-bold text-indigo-600 mb-6 flex items-center">
-                <svg class="w-8 h-8 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
-                口算大师
-            </h1>
+        <div class="w-full md:w-1/3 lg:w-1/4 bg-white rounded-2xl shadow-xl flex flex-col h-full border border-indigo-50">
+            <div class="p-6 pb-2">
+                <h1 class="text-2xl font-bold text-indigo-600 flex items-center">
+                    <span class="bg-indigo-100 p-2 rounded-lg mr-3">
+                        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
+                    </span>
+                    口算大师
+                </h1>
+                <p class="text-xs text-gray-400 mt-1 ml-1">专业的小学数学出题神器</p>
+            </div>
             
-            <div class="space-y-6 flex-1">
+            <div class="flex-1 overflow-y-auto px-6 py-2 space-y-6">
                 
                 <!-- Operations -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">运算类型</label>
+                <div class="bg-gray-50 p-4 rounded-xl border border-gray-100">
+                    <label class="block text-sm font-bold text-gray-700 mb-3 flex items-center">
+                        <svg class="w-4 h-4 mr-1 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
+                        运算类型
+                    </label>
                     <div class="grid grid-cols-2 gap-3">
-                        <label class="flex items-center space-x-2 border p-2 rounded-lg cursor-pointer hover:bg-indigo-50 transition">
-                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded" value="+" checked>
-                            <span class="text-lg font-bold text-gray-700">+ 加法</span>
+                        <label class="flex items-center space-x-2 bg-white border p-2 rounded-lg cursor-pointer hover:border-indigo-300 transition shadow-sm">
+                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded w-5 h-5" value="+" checked>
+                            <span class="font-medium text-gray-700">+ 加法</span>
                         </label>
-                        <label class="flex items-center space-x-2 border p-2 rounded-lg cursor-pointer hover:bg-indigo-50 transition">
-                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded" value="-" checked>
-                            <span class="text-lg font-bold text-gray-700">- 减法</span>
+                        <label class="flex items-center space-x-2 bg-white border p-2 rounded-lg cursor-pointer hover:border-indigo-300 transition shadow-sm">
+                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded w-5 h-5" value="-" checked>
+                            <span class="font-medium text-gray-700">- 减法</span>
                         </label>
-                        <label class="flex items-center space-x-2 border p-2 rounded-lg cursor-pointer hover:bg-indigo-50 transition">
-                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded" value="×">
-                            <span class="text-lg font-bold text-gray-700">× 乘法</span>
+                        <label class="flex items-center space-x-2 bg-white border p-2 rounded-lg cursor-pointer hover:border-indigo-300 transition shadow-sm">
+                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded w-5 h-5" value="×">
+                            <span class="font-medium text-gray-700">× 乘法</span>
                         </label>
-                        <label class="flex items-center space-x-2 border p-2 rounded-lg cursor-pointer hover:bg-indigo-50 transition">
-                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded" value="÷">
-                            <span class="text-lg font-bold text-gray-700">÷ 除法</span>
+                        <label class="flex items-center space-x-2 bg-white border p-2 rounded-lg cursor-pointer hover:border-indigo-300 transition shadow-sm">
+                            <input type="checkbox" class="op-check form-checkbox text-indigo-600 rounded w-5 h-5" value="÷">
+                            <span class="font-medium text-gray-700">÷ 除法</span>
                         </label>
                     </div>
                 </div>
 
-                <!-- Range -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">数字范围</label>
-                    <div class="flex items-center space-x-2">
-                        <input type="number" id="minVal" value="1" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border" placeholder="Min">
-                        <span class="text-gray-400">至</span>
-                        <input type="number" id="maxVal" value="20" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border" placeholder="Max">
+                <!-- Range & Count -->
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-bold text-gray-700 mb-2">数字范围 (1-100)</label>
+                        <div class="flex items-center space-x-2">
+                            <input type="number" id="minVal" value="1" class="w-full bg-gray-50 border-gray-200 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 p-2.5 border text-center font-mono" placeholder="Min">
+                            <span class="text-gray-400 font-bold">-</span>
+                            <input type="number" id="maxVal" value="20" class="w-full bg-gray-50 border-gray-200 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 p-2.5 border text-center font-mono" placeholder="Max">
+                        </div>
                     </div>
-                </div>
 
-                <!-- Count -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">题目数量: <span id="countDisplay" class="text-indigo-600 font-bold">50</span></label>
-                    <input type="range" id="countRange" min="10" max="100" value="50" step="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600">
+                    <div>
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="text-sm font-bold text-gray-700">题目数量</label>
+                            <span id="countDisplay" class="bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded text-sm font-bold">50</span>
+                        </div>
+                        <input type="range" id="countRange" min="10" max="100" value="50" step="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600">
+                    </div>
                 </div>
 
-                <!-- Actions -->
-                <div class="pt-4 space-y-3">
-                    <button onclick="generatePreview()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-xl shadow-lg transform transition hover:-translate-y-0.5 active:translate-y-0 flex justify-center items-center">
-                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
-                        生成预览
-                    </button>
-                    <button onclick="downloadPDF()" class="w-full bg-white border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 font-bold py-3 px-4 rounded-xl shadow-sm transform transition hover:-translate-y-0.5 active:translate-y-0 flex justify-center items-center">
-                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
-                        下载 PDF
-                    </button>
+                <!-- Advanced Options -->
+                <div class="bg-indigo-50/50 p-4 rounded-xl border border-indigo-100 space-y-3">
+                    <h3 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">高级选项</h3>
+                    
+                    <label class="flex items-center space-x-3 cursor-pointer group">
+                        <div class="relative flex items-center">
+                            <input type="checkbox" id="enableBlank" class="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 focus:outline-none transition-all">
+                            <svg class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100" viewBox="0 0 14 14" fill="none"><path d="M3 8L6 11L11 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                        </div>
+                        <span class="text-sm font-medium text-gray-700 group-hover:text-indigo-700 transition">填空题模式 (如: 3 + ? = 5)</span>
+                    </label>
+                    
+                    <label class="flex items-center space-x-3 cursor-pointer group">
+                        <div class="relative flex items-center">
+                            <input type="checkbox" id="enableAnswers" class="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 focus:outline-none transition-all">
+                            <svg class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100" viewBox="0 0 14 14" fill="none"><path d="M3 8L6 11L11 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                        </div>
+                        <span class="text-sm font-medium text-gray-700 group-hover:text-indigo-700 transition">附带答案页 (PDF)</span>
+                    </label>
+
+                    <div class="flex items-center justify-between text-sm">
+                        <span class="font-medium text-gray-700">PDF 列数:</span>
+                        <div class="flex bg-white rounded-lg p-1 border shadow-sm">
+                            <label class="px-3 py-1 rounded cursor-pointer transition" id="col3_label">
+                                <input type="radio" name="cols" value="3" class="hidden" onchange="updateColUI(this)">
+                                3列
+                            </label>
+                            <label class="px-3 py-1 rounded bg-indigo-100 text-indigo-700 font-bold cursor-pointer transition" id="col4_label">
+                                <input type="radio" name="cols" value="4" class="hidden" onchange="updateColUI(this)" checked>
+                                4列
+                            </label>
+                        </div>
+                    </div>
                 </div>
+
             </div>
             
-            <div class="mt-6 text-xs text-gray-400 text-center">
-                Built with Flask & Tailwind for Hugging Face
+            <!-- Actions -->
+            <div class="p-6 pt-2 space-y-3 bg-white border-t border-gray-100">
+                <button onclick="generatePreview()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-indigo-200 transform transition hover:-translate-y-0.5 active:translate-y-0 flex justify-center items-center">
+                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+                    生成题目预览
+                </button>
+                <button onclick="downloadPDF()" class="w-full bg-white border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 font-bold py-3.5 px-4 rounded-xl shadow-sm transform transition hover:-translate-y-0.5 active:translate-y-0 flex justify-center items-center group">
+                    <svg class="w-5 h-5 mr-2 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                    下载 PDF 试卷
+                </button>
             </div>
         </div>
 
         <!-- Main: Preview -->
-        <div class="flex-1 bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col">
+        <div class="flex-1 bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col border border-gray-100">
             <div class="bg-gray-50 px-6 py-4 border-b flex justify-between items-center">
-                <h2 class="font-bold text-gray-700">试卷预览 (A4 模拟)</h2>
-                <div class="text-sm text-gray-500">
-                    * 实际 PDF 排版可能略有不同
+                <div class="flex items-center space-x-2">
+                    <div class="h-3 w-3 rounded-full bg-red-400"></div>
+                    <div class="h-3 w-3 rounded-full bg-yellow-400"></div>
+                    <div class="h-3 w-3 rounded-full bg-green-400"></div>
+                </div>
+                <h2 class="font-bold text-gray-700">A4 试卷预览</h2>
+                <div class="text-xs text-gray-400">
+                    仅供预览，请以 PDF 为准
                 </div>
             </div>
-            <div class="flex-1 overflow-y-auto p-8 paper-bg relative">
-                <div id="previewArea" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-lg font-mono text-gray-800">
+            <div class="flex-1 overflow-y-auto p-8 paper-bg relative" id="paperContainer">
+                <div id="previewArea" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-8 gap-x-4 text-xl font-mono text-gray-800">
                     <!-- Problems go here -->
-                    <div class="text-center text-gray-400 col-span-full py-20">
-                        点击左侧“生成预览”查看题目
+                    <div class="text-center text-gray-400 col-span-full py-32 flex flex-col items-center justify-center">
+                        <svg class="w-16 h-16 text-gray-200 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                        <p>请点击左侧“生成题目预览”</p>
                     </div>
                 </div>
             </div>
@@ -107,22 +160,45 @@
     </div>
 
     <script>
-        // Update Range Display
+        // UI Helpers
         const countRange = document.getElementById('countRange');
         const countDisplay = document.getElementById('countDisplay');
         countRange.addEventListener('input', (e) => countDisplay.innerText = e.target.value);
 
+        function updateColUI(radio) {
+            document.querySelectorAll('input[name="cols"]').forEach(r => {
+                const label = r.parentElement;
+                if (r.checked) {
+                    label.classList.add('bg-indigo-100', 'text-indigo-700', 'font-bold');
+                } else {
+                    label.classList.remove('bg-indigo-100', 'text-indigo-700', 'font-bold');
+                }
+            });
+            // Update preview grid if generated
+            const grid = document.getElementById('previewArea');
+            if (radio.value == '3') {
+                grid.classList.remove('lg:grid-cols-4');
+                grid.classList.add('lg:grid-cols-3');
+            } else {
+                grid.classList.remove('lg:grid-cols-3');
+                grid.classList.add('lg:grid-cols-4');
+            }
+        }
+
         function getSettings() {
             const ops = Array.from(document.querySelectorAll('.op-check:checked')).map(cb => cb.value);
             const min = parseInt(document.getElementById('minVal').value) || 1;
             const max = parseInt(document.getElementById('maxVal').value) || 20;
             const count = parseInt(countRange.value) || 50;
+            const blank_prob = document.getElementById('enableBlank').checked ? 0.5 : 0;
+            const with_answers = document.getElementById('enableAnswers').checked;
+            const cols = document.querySelector('input[name="cols"]:checked').value;
             
             if (ops.length === 0) {
                 alert('请至少选择一种运算类型！');
                 return null;
             }
-            return { ops, min, max, count };
+            return { ops, min, max, count, blank_prob, with_answers, cols };
         }
 
         async function generatePreview() {
@@ -130,7 +206,17 @@
             if (!settings) return;
 
             const previewArea = document.getElementById('previewArea');
-            previewArea.innerHTML = '<div class="col-span-full text-center py-20"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div></div>';
+            
+            // Apply grid cols immediately for visual feedback
+            if (settings.cols == '3') {
+                previewArea.classList.remove('lg:grid-cols-4');
+                previewArea.classList.add('lg:grid-cols-3');
+            } else {
+                previewArea.classList.remove('lg:grid-cols-3');
+                previewArea.classList.add('lg:grid-cols-4');
+            }
+
+            previewArea.innerHTML = '<div class="col-span-full text-center py-32"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div></div>';
 
             try {
                 const res = await axios.post('/api/preview', settings);
@@ -139,11 +225,11 @@
                 previewArea.innerHTML = '';
                 problems.forEach((p, index) => {
                     const el = document.createElement('div');
-                    el.className = 'border-b border-gray-200 py-2 px-4 flex justify-between items-center bg-white/50 rounded hover:bg-white transition';
+                    // Simulating paper look
+                    el.className = 'py-2 px-2 flex items-center hover:bg-indigo-50/50 rounded transition select-text';
                     el.innerHTML = `
-                        <span class="font-bold text-gray-700">${index + 1}.</span>
-                        <span class="text-xl tracking-wider">${p.question}</span>
-                        <span class="text-transparent border-b border-gray-400 w-12 text-center group-hover:text-gray-300 select-none">?</span>
+                        <span class="font-bold text-gray-400 mr-3 text-sm w-6 text-right">${index + 1}.</span>
+                        <span class="text-2xl font-mono text-gray-800 tracking-wide">${p.question.replace(/\s/g, '&nbsp;')}</span>
                     `;
                     previewArea.appendChild(el);
                 });
@@ -157,8 +243,12 @@
             const settings = getSettings();
             if (!settings) return;
 
+            const btn = event.currentTarget;
+            const originalText = btn.innerHTML;
+            btn.innerHTML = '<svg class="animate-spin h-5 w-5 mr-2 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>生成中...';
+            btn.disabled = true;
+
             try {
-                // Use fetch to get blob
                 const response = await fetch('/api/download', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -178,6 +268,9 @@
                 window.URL.revokeObjectURL(url);
             } catch (err) {
                 alert('下载失败: ' + err.message);
+            } finally {
+                btn.innerHTML = originalText;
+                btn.disabled = false;
             }
         }