feat: UI overhaul with glassmorphism and modern styling

app.py

@@ -172,77 +172,174 @@ def textbook_exercise(knowledge_point: str, difficulty: str):
 # ============================================================================
 
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+    --primary-color: #6366f1;
+    --secondary-color: #ec4899;
+    --background-dark: #0f172a;
+    --panel-bg: rgba(30, 41, 59, 0.7);
+    --text-light: #f8fafc;
+    --text-gray: #94a3b8;
+}
+
+body {
+    background-color: var(--background-dark);
+    color: var(--text-light);
+}
+
 .gradio-container {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
+    font-family: 'Inter', sans-serif !important;
+    background: radial-gradient(circle at top left, #1e1b4b, #0f172a) !important;
+    max-width: 1200px !important;
 }
 
+/* Title & Header */
 .main-title {
-    font-weight: 700 !important;
-    font-size: 2.2rem !important;
-    background: linear-gradient(90deg, #e94560, #f39c12, #00d9ff) !important;
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 800 !important;
+    font-size: 3rem !important;
+    background: linear-gradient(to right, #818cf8, #c084fc, #f472b6) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
     text-align: center !important;
+    margin-bottom: 0.5rem !important;
+    letter-spacing: -0.02em !important;
 }
 
 .subtitle {
     text-align: center !important;
-    color: #94a3b8 !important;
+    color: var(--text-gray) !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 3rem !important;
+    font-weight: 300 !important;
+}
+
+/* Tabs */
+.tabs {
+    border: none !important;
+    background: transparent !important;
+    margin-bottom: 2rem !important;
+}
+
+.tab-nav {
+    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
+    justify-content: center !important;
+}
+
+.tab-nav button {
+    font-weight: 600 !important;
     font-size: 1rem !important;
-    margin-bottom: 1.5rem !important;
+    color: var(--text-gray) !important;
+    transition: all 0.3s ease !important;
+}
+
+.tab-nav button.selected {
+    color: #818cf8 !important;
+    border-bottom: 2px solid #818cf8 !important;
 }
 
+/* Panels & Cards */
+.glass-panel {
+    background: var(--panel-bg) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+}
+
+/* Inputs */
+textarea, input {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: rgba(15, 23, 42, 0.6) !important;
+    border: 1px solid rgba(148, 163, 184, 0.2) !important;
+    color: var(--text-light) !important;
+    border-radius: 8px !important;
+    transition: border-color 0.2s !important;
+}
+
+textarea:focus, input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
+}
+
+/* Buttons */
 .gr-button-primary {
-    background: linear-gradient(135deg, #e94560 0%, #f39c12 100%) !important;
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
     border: none !important;
+    color: white !important;
     font-weight: 600 !important;
+    border-radius: 8px !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
 }
 
 .gr-button-primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.4) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3) !important;
 }
 
 .gr-button-secondary {
-    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
-    border: none !important;
-    color: white !important;
+    background: rgba(30, 41, 59, 0.8) !important;
+    border: 1px solid rgba(148, 163, 184, 0.3) !important;
+    color: var(--text-gray) !important;
+    border-radius: 8px !important;
+}
+
+.gr-button-secondary:hover {
+    background: rgba(51, 65, 85, 0.8) !important;
+    color: var(--text-light) !important;
+}
+
+/* Labels */
+label span {
+    color: #cbd5e1 !important;
+    font-weight: 500 !important;
+    font-size: 0.9rem !important;
+    margin-bottom: 0.5rem !important;
 }
 
-footer {
-    display: none !important;
+/* Footer */
+.footer-text {
+    text-align: center;
+    margin-top: 4rem;
+    padding: 2rem;
+    color: var(--text-gray);
+    font-size: 0.9rem;
+    border-top: 1px solid rgba(148, 163, 184, 0.1);
 }
 """
 
-with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css) as demo:
+with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css, theme=gr.themes.Soft()) as demo:
     gr.HTML('<h1 class="main-title">🧮 UltraData-Math L3 Generator</h1>')
-    gr.HTML('<p class="subtitle">LLM-based Mathematical Data Synthesis Tool</p>')
+    gr.HTML('<p class="subtitle">✨ Next-Gen Mathematical Data Synthesis Powered by LLM ✨</p>')
     
     with gr.Tabs():
         # Q&A Synthesis Tab
         with gr.TabItem("📝 Q&A Synthesis"):
-            gr.Markdown("根据数学内容生成问答对，按教育难度分级。")
-            with gr.Row():
-                with gr.Column():
-                    qa_input = gr.Textbox(
-                        label="Input Mathematical Content",
-                        placeholder="Enter mathematical content here...",
-                        lines=8,
-                    )
-                    qa_level = gr.Radio(
-                        choices=list(QA_PROMPTS.keys()),
-                        value="high_school",
-                        label="Difficulty Level",
-                    )
-                    with gr.Row():
-                        qa_example_btn = gr.Button("📋 Load Example", variant="secondary")
-                        qa_btn = gr.Button("🚀 Generate Q&A", variant="primary")
-                with gr.Column():
-                    qa_problem = gr.Textbox(label="Generated Problem", lines=4)
-                    qa_solution = gr.Textbox(label="Generated Solution", lines=8)
-                    qa_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
+            with gr.Column(elem_classes=["glass-panel"]):
+                gr.Markdown("### 💡 Transform Text into Q&A Pairs\nGenerate high-quality question-answer pairs from mathematical content, tailored to different educational levels.")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        qa_input = gr.Textbox(
+                            label="Input Mathematical Content",
+                            placeholder="Paste your mathematical text here (e.g., definitions, theorems, proofs)...",
+                            lines=10,
+                        )
+                        qa_level = gr.Radio(
+                            choices=list(QA_PROMPTS.keys()),
+                            value="high_school",
+                            label="Difficulty Level",
+                            info="Select the target audience level"
+                        )
+                        with gr.Row():
+                            qa_example_btn = gr.Button("📋 Load Example", variant="secondary")
+                            qa_btn = gr.Button("🚀 Generate Q&A", variant="primary")
+                    
+                    with gr.Column(scale=1):
+                        qa_problem = gr.Textbox(label="Generated Problem", lines=5, show_copy_button=True)
+                        qa_solution = gr.Textbox(label="Generated Solution", lines=12, show_copy_button=True)
+                        qa_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
             
             qa_example_btn.click(
                 lambda: EXAMPLE_MATH_CONTENT,
@@ -256,25 +353,28 @@ with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css) as demo:
         
         # Conversation Synthesis Tab
         with gr.TabItem("💬 Conversation Synthesis"):
-            gr.Markdown("将数学内容转换为多轮对话格式。")
-            with gr.Row():
-                with gr.Column():
-                    conv_input = gr.Textbox(
-                        label="Input Mathematical Content",
-                        placeholder="Enter mathematical content here...",
-                        lines=8,
-                    )
-                    conv_style = gr.Radio(
-                        choices=list(CONVERSATION_PROMPTS.keys()),
-                        value="teacher_student",
-                        label="Conversation Style",
-                    )
-                    with gr.Row():
-                        conv_example_btn = gr.Button("📋 Load Example", variant="secondary")
-                        conv_btn = gr.Button("🚀 Generate Conversation", variant="primary")
-                with gr.Column():
-                    conv_output = gr.Textbox(label="Generated Conversation", lines=15)
-                    conv_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
+            with gr.Column(elem_classes=["glass-panel"]):
+                gr.Markdown("### 🗣️ Create Multi-turn Dialogues\nConvert static mathematical text into dynamic, engaging multi-turn conversations between students and teachers.")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        conv_input = gr.Textbox(
+                            label="Input Mathematical Content",
+                            placeholder="Paste your mathematical text here...",
+                            lines=10,
+                        )
+                        conv_style = gr.Radio(
+                            choices=list(CONVERSATION_PROMPTS.keys()),
+                            value="teacher_student",
+                            label="Conversation Style",
+                            info="Choose the persona and tone of the conversation"
+                        )
+                        with gr.Row():
+                            conv_example_btn = gr.Button("📋 Load Example", variant="secondary")
+                            conv_btn = gr.Button("🚀 Generate Conversation", variant="primary")
+                    
+                    with gr.Column(scale=1):
+                        conv_output = gr.Textbox(label="Generated Conversation", lines=20, show_copy_button=True)
+                        conv_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
             
             conv_example_btn.click(
                 lambda: EXAMPLE_MATH_CONTENT,
@@ -288,25 +388,28 @@ with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css) as demo:
         
         # Rewrite Tab
         with gr.TabItem("✨ Multi-style Rewrite"):
-            gr.Markdown("将数学内容改写为不同风格。")
-            with gr.Row():
-                with gr.Column():
-                    rewrite_input = gr.Textbox(
-                        label="Input Mathematical Content",
-                        placeholder="Enter mathematical content here...",
-                        lines=8,
-                    )
-                    rewrite_style = gr.Radio(
-                        choices=list(MULTISTYLE_PROMPTS.keys()),
-                        value="textbook",
-                        label="Rewrite Style",
-                    )
-                    with gr.Row():
-                        rewrite_example_btn = gr.Button("📋 Load Example", variant="secondary")
-                        rewrite_btn = gr.Button("🚀 Rewrite", variant="primary")
-                with gr.Column():
-                    rewrite_output = gr.Textbox(label="Rewritten Content", lines=15)
-                    rewrite_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
+            with gr.Column(elem_classes=["glass-panel"]):
+                gr.Markdown("### 🎨 Style Transfer\nRewrite mathematical content into various styles, from rigorous textbooks to engaging blog posts.")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        rewrite_input = gr.Textbox(
+                            label="Input Mathematical Content",
+                            placeholder="Paste your mathematical text here...",
+                            lines=10,
+                        )
+                        rewrite_style = gr.Radio(
+                            choices=list(MULTISTYLE_PROMPTS.keys()),
+                            value="textbook",
+                            label="Target Style",
+                            info="Select the desired output style"
+                        )
+                        with gr.Row():
+                            rewrite_example_btn = gr.Button("📋 Load Example", variant="secondary")
+                            rewrite_btn = gr.Button("🚀 Rewrite Content", variant="primary")
+                    
+                    with gr.Column(scale=1):
+                        rewrite_output = gr.Textbox(label="Rewritten Content", lines=20, show_copy_button=True)
+                        rewrite_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
             
             rewrite_example_btn.click(
                 lambda: EXAMPLE_MATH_CONTENT,
@@ -320,20 +423,22 @@ with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css) as demo:
         
         # Knowledge Extraction Tab
         with gr.TabItem("📚 Knowledge Extraction"):
-            gr.Markdown("从数学内容中提取定义、定理、性质等知识点。")
-            with gr.Row():
-                with gr.Column():
-                    know_input = gr.Textbox(
-                        label="Input Mathematical Content",
-                        placeholder="Enter mathematical content here...",
-                        lines=10,
-                    )
-                    with gr.Row():
-                        know_example_btn = gr.Button("📋 Load Example", variant="secondary")
-                        know_btn = gr.Button("🚀 Extract Knowledge", variant="primary")
-                with gr.Column():
-                    know_output = gr.Textbox(label="Extracted Knowledge Points", lines=15)
-                    know_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
+            with gr.Column(elem_classes=["glass-panel"]):
+                gr.Markdown("### 🧠 Extract Core Knowledge\nAutomatically identify and extract key definitions, theorems, and properties from unstructured text.")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        know_input = gr.Textbox(
+                            label="Input Mathematical Content",
+                            placeholder="Paste your mathematical text here...",
+                            lines=12,
+                        )
+                        with gr.Row():
+                            know_example_btn = gr.Button("📋 Load Example", variant="secondary")
+                            know_btn = gr.Button("🚀 Extract Knowledge", variant="primary")
+                    
+                    with gr.Column(scale=1):
+                        know_output = gr.Textbox(label="Extracted Knowledge Points", lines=20, show_copy_button=True)
+                        know_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
             
             know_example_btn.click(
                 lambda: EXAMPLE_MATH_CONTENT,
@@ -347,25 +452,28 @@ with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css) as demo:
         
         # Textbook Exercise Tab
         with gr.TabItem("📖 Textbook Exercise"):
-            gr.Markdown("基于知识点生成不同难度的教材式练习。")
-            with gr.Row():
-                with gr.Column():
-                    textbook_input = gr.Textbox(
-                        label="Input Knowledge Point",
-                        placeholder="Enter a mathematical knowledge point...",
-                        lines=6,
-                    )
-                    textbook_diff = gr.Radio(
-                        choices=list(TEXTBOOK_EXERCISE_PROMPTS.keys()),
-                        value="easy",
-                        label="Difficulty",
-                    )
-                    with gr.Row():
-                        textbook_example_btn = gr.Button("📋 Load Example", variant="secondary")
-                        textbook_btn = gr.Button("🚀 Generate Exercise", variant="primary")
-                with gr.Column():
-                    textbook_output = gr.Textbox(label="Generated Exercise Material", lines=15)
-                    textbook_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
+            with gr.Column(elem_classes=["glass-panel"]):
+                gr.Markdown("### 📝 Generate Exercises\nCreate comprehensive textbook-style exercises and problems based on specific knowledge points.")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        textbook_input = gr.Textbox(
+                            label="Input Knowledge Point",
+                            placeholder="Enter a specific mathematical concept or theorem...",
+                            lines=8,
+                        )
+                        textbook_diff = gr.Radio(
+                            choices=list(TEXTBOOK_EXERCISE_PROMPTS.keys()),
+                            value="easy",
+                            label="Difficulty",
+                            info="Select the problem difficulty"
+                        )
+                        with gr.Row():
+                            textbook_example_btn = gr.Button("📋 Load Example", variant="secondary")
+                            textbook_btn = gr.Button("🚀 Generate Exercise", variant="primary")
+                    
+                    with gr.Column(scale=1):
+                        textbook_output = gr.Textbox(label="Generated Exercise Material", lines=20, show_copy_button=True)
+                        textbook_raw = gr.Textbox(label="Raw Response", lines=4, visible=False)
             
             textbook_example_btn.click(
                 lambda: EXAMPLE_KNOWLEDGE_POINT,
@@ -378,9 +486,9 @@ with gr.Blocks(title="UltraData-Math L3 Generator", css=custom_css) as demo:
             )
     
     gr.HTML("""
-    <div style="text-align: center; margin-top: 2rem; padding: 1rem; color: #64748b; font-size: 0.85rem;">
+    <div class="footer-text">
         <p>🔬 <strong>UltraData-Math L3 Generator</strong> - Part of the UltraData-Math Project</p>
-        <p>LLM-based data synthesis for Q&A, conversations, rewriting, and more.</p>
+        <p>Powered by OpenBMB & ModelBest • <a href="https://huggingface.co/spaces/openbmb/UltraData-Math-L3-Generator" target="_blank" style="color: #818cf8; text-decoration: none;">View on Hugging Face</a></p>
     </div>
     """)