Update UI: improve spacing, font sizes, layout and add life story and interests fields

METHOD_COMPARISON.md

@@ -0,0 +1,295 @@
+# Generation Method Comparison
+
+## Overview
+
+This document compares the original generation method (`generation_user_profile`) with the improved method (`generate_user_profile_final`).
+
+## Architecture Comparison
+
+### Original Method (`generation_user_profile`)
+
+```
+Input → generate_profile.py → Batch attribute generation → Final summary
+```
+
+**Key characteristics:**
+- Single-pass batch generation for all attributes
+- Generic prompts for all attribute types
+- Fixed attribute selection
+- Simpler summary generation
+
+### Improved Method (`generate_user_profile_final`)
+
+```
+Input → select_attributes.py → Category-based generation → Enhanced summary
+         ↓
+    Configurable attribute count
+         ↓
+    Sequential category processing with context building
+```
+
+**Key characteristics:**
+- Multi-stage generation with context accumulation
+- Category-specific prompts with detailed instructions
+- Configurable attribute count (100-350)
+- Advanced summary generation with "Show, Don't Tell" principle
+
+## Detailed Comparison
+
+### 1. Attribute Selection
+
+| Aspect | Original | Improved |
+|--------|----------|----------|
+| Selection Method | Fixed selection | Dynamic based on count |
+| Configurability | No | Yes (100-350 attributes) |
+| Diversity | Standard | Adaptive |
+
+### 2. Generation Prompts
+
+#### Original Method - Generic Prompt
+```python
+system_prompt = """You are an AI assistant specialized in generating 
+attribute values for personal profiles. Based on the provided base summary 
+and multiple attribute paths, generate logically consistent values..."""
+```
+
+#### Improved Method - Category-Specific Prompts
+
+**Example: Demographic Information**
+```python
+demographic_input = """
+Instructions: Based on the `base_info` and `life_story` provided, 
+**develop and elaborate on** the 'Demographic Information' section in English. 
+Your task is to **appropriately expand upon and enrich** the existing information 
+from `base_info` and incorporate relevant insights from the `life_story`...
+"""
+```
+
+**Example: Core Values**
+```python
+core_input = """
+Instructions: Based on the full context provided, develop and elaborate on 
+the 'Core Values, Beliefs, and Philosophy' section in English. 
+Pay special attention to the person's location and background, 
+infusing the philosophical outlook with relevant cultural nuances...
+IMPORTANT: Avoid including anything related to community-building activities.
+Prohibit the use of words such as 'balance' and 'balance'
+"""
+```
+
+### 3. Generation Flow
+
+#### Original Method
+```
+1. Run select_attributes.py
+2. Load base_info and selected_paths
+3. Generate all sections in parallel:
+   - Demographic Information
+   - Career and Work Identity
+   - Core Values, Beliefs, and Philosophy
+   - Lifestyle and Daily Routine
+   - Cultural and Social Context
+   - Hobbies, Interests, and Lifestyle
+   - Other Attributes
+4. Generate summary
+```
+
+#### Improved Method
+```
+1. Run select_attributes.py with specified attribute count
+2. Load base_info and selected_paths
+3. Generate sections sequentially with context building:
+   Step 1: Demographic Information
+           ↓ (context passed forward)
+   Step 2: Career and Work Identity
+           ↓ (accumulated context)
+   Step 3: Core Values, Beliefs, and Philosophy
+           ↓ (accumulated context)
+   Step 4: Lifestyle and Daily Routine
+           ↓ (accumulated context)
+   Step 5: Cultural and Social Context
+           ↓ (accumulated context)
+   Step 6: Hobbies, Interests, and Lifestyle
+           ↓ (accumulated context)
+   Step 7: Other Attributes
+           ↓
+4. Generate enhanced summary with full context
+```
+
+### 4. Summary Generation
+
+#### Original Method
+```python
+system_prompt = """
+Your Task: Create a believable and engaging personal profile, 
+150-400 words, based on the provided text. Your ultimate goal is 
+a narrative that feels like it comes from a real, self-aware person.
+"""
+```
+
+#### Improved Method
+```python
+system_prompt = """
+Your task: Based solely on the provided user attributes and personal story, 
+create an objective and factual personal profile, strictly between 150–400 words.
+
+Content Requirements:
+• The profile must be written entirely in the first-person perspective.
+• The output should be a coherent, logically structured narrative, not a list of points.
+• The opening must explicitly state my country or region.
+• Must include:
+  1. Basic background (e.g., location, identity)
+  2. Daily life or work routines
+  3. Personal interests and hobbies (explicitly highlighted)
+  4. Behavioral tendencies or values (positive or negative)
+• Interests and hobbies must be integrated naturally with small, ordinary details.
+• If there are negative traits, they must be represented faithfully without softening.
+• No declarative or reflective endings.
+• Only include information explicitly provided.
+• Prohibit the use of words such as 'balance' and 'balance'
+"""
+
+user_prompt += """
+Generate a first-person narrative of 100-400 words from the provided profile. 
+Your primary goal is to make the person feel real, believable, and authentic.
+
+To achieve this, strictly follow the 'Show, Don't Tell' principle:
+1. **Illustrate, Don't Declare:** Show values and traits through specific actions.
+2. **Connect Actions to Motivation:** Briefly explain the 'why' behind key choices.
+3. **Maintain a Natural Voice:** The tone must be sincere and grounded.
+"""
+```
+
+### 5. Context Management
+
+| Aspect | Original | Improved |
+|--------|----------|----------|
+| Context Passing | Minimal | Comprehensive |
+| Section Dependencies | Independent | Sequential with accumulation |
+| Consistency Enforcement | Basic | Advanced with explicit instructions |
+
+### 6. Quality Control
+
+#### Original Method
+- Basic word count check (150-400 words)
+- JSON parsing validation
+- Simple error handling
+
+#### Improved Method
+- Strict word count enforcement (100-400 words)
+- Enhanced JSON parsing with markdown cleanup
+- Detailed error reporting with traceback
+- Category-specific validation
+- Explicit prohibition of certain words/phrases
+- "Show, Don't Tell" principle enforcement
+
+### 7. Hobbies and Interests Generation
+
+#### Original Method
+```python
+hobbies_input = """
+Based on the complete profile context provided above, generate the 
+'Hobbies, Interests, and Lifestyle' section.
+
+1. Use Base Hobbies as a Starting Point
+2. Embrace Imagination and Psychological Depth
+3. Synthesize with Full Context
+4. Detail Related Lifestyle Choices
+"""
+```
+
+#### Improved Method
+```python
+hobbies_input = """
+Ensure that all hobbies, interests, and lifestyle choices presented are:
+1. **Firmly anchored to and primarily derived from the hobbies indicated 
+   in `base_info` and experiences from `life_story`.**
+2. Logically consistent with all provided information.
+3. Enriched by supplementary information where appropriate, without 
+   overshadowing the core hobbies from `base_info`.
+**Do not introduce new primary hobbies or interests that are not clearly 
+supported by or cannot be reasonably inferred from the `base_info` and 
+`life_story` themselves.**
+Prohibit the use of words such as 'balance' and 'balance'
+"""
+```
+
+## Performance Comparison
+
+| Metric | Original | Improved |
+|--------|----------|----------|
+| Generation Time | ~2-3 min | ~3-5 min (due to sequential processing) |
+| API Calls | ~7-8 | ~7-8 |
+| Consistency | Good | Excellent |
+| Realism | Good | Excellent |
+| Customization | Limited | High |
+
+## Use Case Recommendations
+
+### Use Original Method When:
+- Quick generation is needed
+- Standard attribute set is sufficient
+- Simple personas are acceptable
+
+### Use Improved Method When:
+- High-quality, realistic personas are required
+- Detailed character profiles are needed
+- Consistency across attributes is critical
+- Custom attribute counts are desired
+- Cultural nuances are important
+
+## Code Examples
+
+### Original Method Usage
+```python
+from generation_user_profile.code.web_api_bridge import generate_profile_from_input
+
+input_data = {
+    "basic_info": {
+        "age": 30,
+        "gender": "Female",
+        "occupation": {"status": "Software Engineer"},
+        "location": {"city": "San Francisco", "country": "USA"}
+    }
+}
+
+profile = generate_profile_from_input(input_data)
+print(profile["Summary"])
+```
+
+### Improved Method Usage
+```python
+from generate_user_profile_final.code.web_api_bridge import generate_profile_from_input
+
+input_data = {
+    "basic_info": {
+        "age": 30,
+        "gender": "Female",
+        "occupation": {"status": "Software Engineer"},
+        "location": {"city": "San Francisco", "country": "USA"}
+    }
+}
+
+# Generate with 250 attributes for more detail
+profile = generate_profile_from_input(input_data, attribute_count=250)
+print(profile["Summary"])
+
+# Access detailed sections
+print(profile["Demographic Information"])
+print(profile["Career and Work Identity"])
+print(profile["Hobbies, Interests, and Lifestyle"])
+```
+
+## Conclusion
+
+The improved method (`generate_user_profile_final`) offers:
+- **Better Quality**: More realistic and authentic personas
+- **More Control**: Configurable attribute counts
+- **Higher Consistency**: Sequential generation with context building
+- **Enhanced Realism**: Advanced prompts with specific guidelines
+
+Trade-offs:
+- **Slightly Slower**: Sequential processing takes more time
+- **More Complex**: More sophisticated logic and error handling
+
+For production use cases requiring high-quality persona generation, the improved method is recommended.

MIGRATION_NOTES.md

@@ -0,0 +1,142 @@
+# Migration to Improved Generation Method
+
+## Overview
+
+The web application has been updated to use the improved persona generation method from `generate_user_profile_final` instead of the older `generation_user_profile` method.
+
+## Key Changes
+
+### 1. Updated Generation Method
+
+**Before:**
+- Used `generation_user_profile/code/web_api_bridge.py`
+- Simpler generation logic with basic prompts
+- Fixed attribute generation approach
+
+**After:**
+- Uses `generate_user_profile_final/code/web_api_bridge.py`
+- Advanced generation logic with improved prompts from `generate_profile_ind.py`
+- Configurable attribute count (100-350)
+- Better structured generation with category-based batch processing
+
+### 2. Improved Features
+
+#### Enhanced Prompt Engineering
+- More detailed system prompts for each profile section
+- Better instructions for maintaining consistency across attributes
+- "Show, Don't Tell" principle for more authentic narratives
+- Explicit guidelines to avoid clichés and create realistic personas
+
+#### Category-Based Generation
+The new method generates attributes in logical categories:
+1. **Demographic Information** - Basic demographic data with context
+2. **Career and Work Identity** - Professional journey and work-related aspects
+3. **Core Values, Beliefs, and Philosophy** - Guiding principles and worldview
+4. **Lifestyle and Daily Routine** - Concrete daily actions and habits
+5. **Cultural and Social Context** - Relationship with society and environment
+6. **Hobbies, Interests, and Lifestyle** - Personal interests with psychological depth
+7. **Other Attributes** - Communication style, decision-making, quirks, and internal conflicts
+
+#### Configurable Attribute Count
+- Users can now specify the number of attributes (100-350)
+- More attributes = more detailed and nuanced persona
+- Default: 200 attributes
+
+### 3. File Changes
+
+#### Modified Files
+- `/app.py` - Updated to use new generation method and added attribute count slider
+
+#### New Files
+- `/generate_user_profile_final/code/web_api_bridge.py` - New bridge module for web interface
+
+### 4. API Changes
+
+The `generate_profile_from_input()` function now accepts an additional parameter:
+
+```python
+def generate_profile_from_input(
+    input_data: Dict[str, Any], 
+    attribute_count: int = 200
+) -> Dict[str, Any]:
+    """
+    Generate a complete user persona from input data
+    
+    Args:
+        input_data: Input data containing basic information and optional custom values
+        attribute_count: Number of attributes to generate (default: 200)
+        
+    Returns:
+        Dict: Generated complete user persona
+    """
+```
+
+### 5. Web Interface Updates
+
+New UI element added:
+- **Attribute Count Slider**: Allows users to control the detail level of generated personas
+  - Range: 100-350 attributes
+  - Step: 50
+  - Default: 200
+
+## Benefits
+
+1. **Higher Quality Personas**: Improved prompts generate more realistic and authentic character profiles
+2. **Better Consistency**: Category-based generation ensures logical consistency across all attributes
+3. **More Control**: Users can adjust the level of detail based on their needs
+4. **Scalability**: The new method is designed to handle varying complexity levels efficiently
+
+## Migration Guide
+
+If you have existing code that calls the generation function:
+
+**Old way:**
+```python
+from generation_user_profile.code.web_api_bridge import generate_profile_from_input
+
+profile = generate_profile_from_input(input_data)
+```
+
+**New way:**
+```python
+from generate_user_profile_final.code.web_api_bridge import generate_profile_from_input
+
+# With default attribute count (200)
+profile = generate_profile_from_input(input_data)
+
+# With custom attribute count
+profile = generate_profile_from_input(input_data, attribute_count=250)
+```
+
+## Testing
+
+To test the new implementation:
+
+1. Set your OpenAI API key:
+   ```bash
+   export OPENAI_API_KEY="your-api-key"
+   ```
+
+2. Run the application:
+   ```bash
+   cd /Users/yufan_zhou/Documents/deeppersona/deeppersona-experience
+   python app.py
+   ```
+
+3. Open the Gradio interface in your browser
+
+4. Fill in the basic information and try different attribute counts
+
+## Notes
+
+- The old `generation_user_profile` directory is still present for reference but is no longer used by the web application
+- All generated profiles are saved to `generate_user_profile_final/output/`
+- The new method requires the same dependencies as before (see `requirements.txt`)
+
+## Future Improvements
+
+Potential enhancements to consider:
+- Add more granular control over specific attribute categories
+- Implement profile templates for common use cases
+- Add validation and quality checks for generated profiles
+- Support for batch generation through the web interface

app.py

@@ -4,9 +4,16 @@ import subprocess
 from pathlib import Path
 import gradio as gr
 
+# Clear proxy settings to avoid connection issues
+os.environ.pop('http_proxy', None)
+os.environ.pop('https_proxy', None)
+os.environ.pop('HTTP_PROXY', None)
+os.environ.pop('HTTPS_PROXY', None)
+
 # Add code directory to path
 current_dir = Path(__file__).parent
-code_dir = current_dir / "generation_user_profile" / "code"
+# Use the improved generation method from generate_user_profile_final
+code_dir = current_dir / "generate_user_profile_final" / "code"
 sys.path.append(str(code_dir))
 
 # Import necessary modules
@@ -19,10 +26,10 @@ def check_api_key():
         return False
     return True
 
-def generate_persona(age, gender, occupation, city, country, custom_values, custom_life_attitude):
+def generate_persona(age, gender, occupation, city, country, custom_values, custom_life_attitude, life_story, interests_hobbies, attribute_count):
     """Generate persona"""
     if not check_api_key():
-        return "Error: OpenAI API key not set. Please add OPENAI_API_KEY in Hugging Face Space settings."
+        return "❌ Error: OpenAI API key not set. Please add OPENAI_API_KEY in Hugging Face Space settings."
     
     # Build input data
     input_data = {
@@ -36,52 +43,446 @@ def generate_persona(age, gender, occupation, city, country, custom_values, cust
             } if city and country else {}
         },
         "custom_values": {
-            "personal_values": custom_values,
-            "life_attitude": custom_life_attitude
+            "personal_values": custom_values if custom_values else None,
+            "life_attitude": custom_life_attitude if custom_life_attitude else None,
+            "life_story": life_story if life_story else None,
+            "interests_hobbies": interests_hobbies if interests_hobbies else None
         }
     }
     
-    # Generate persona
+    # Generate persona with specified attribute count
     try:
-        profile = generate_profile_from_input(input_data)
+        profile = generate_profile_from_input(input_data, attribute_count=int(attribute_count))
         if "Summary" in profile:
             return profile["Summary"]
         else:
-            return "Error generating persona, could not get summary."
+            return "❌ Error generating persona, could not get summary."
     except Exception as e:
-        return f"Error generating persona: {str(e)}"
+        import traceback
+        return f"❌ Error generating persona: {str(e)}\n{traceback.format_exc()}"
+
+# Custom CSS for better styling
+custom_css = """
+body, html {
+    background: white !important;
+    min-height: 100vh;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.gradio-container {
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 auto !important;
+    background: transparent !important;
+    padding: 0 20px !important;
+}
+
+.main {
+    background: transparent !important;
+}
+
+/* Force all backgrounds to be light */
+div, section, form, .app, .contain, .wrap {
+    background: transparent !important;
+}
+
+/* Override Gradio's default dark theme */
+.dark, [data-theme="dark"], .gradio-container.dark {
+    background: transparent !important;
+}
+
+/* Force light background on root elements */
+#root, .app, body > div {
+    background: white !important;
+}
+
+/* Only keep white backgrounds for main columns */
+.input-column, .output-column {
+    background: rgba(255, 255, 255, 0.95) !important;
+}
+
+.header-text {
+    text-align: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 3.2em !important;
+    font-weight: bold;
+    margin-bottom: 0.2em;
+}
+
+.subtitle-text {
+    text-align: center;
+    color: #555;
+    font-size: 1.5em;
+    margin-bottom: 0.8em;
+}
+
+.section-header {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    color: white !important;
+    padding: 8px 16px;
+    border-radius: 8px;
+    margin: 0 0 -8px 0;
+    font-weight: 600;
+    font-size: 1.4em;
+}
+
+/* h3 elements */
+h3 {
+    font-size: 1.8em !important;
+}
+
+.input-column {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    border: 1px solid #e8e8e8;
+}
+
+.output-column {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    border: 1px solid #e8e8e8;
+}
+
+.generate-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-size: 1.6em !important;
+    font-weight: 600 !important;
+    padding: 10px 20px !important;
+    border-radius: 8px !important;
+    margin-top: 8px !important;
+    transition: transform 0.2s !important;
+    width: 100% !important;
+}
+
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
+}
+
+.warning-box {
+    background: rgba(255, 243, 205, 0.9);
+    border-left: 4px solid #ffc107;
+    padding: 8px;
+    border-radius: 8px;
+    margin: 8px 0;
+    font-size: 1.2em;
+    color: #856404;
+}
+
+.info-box {
+    background: rgba(231, 243, 255, 0.9);
+    border-left: 4px solid #2196F3;
+    padding: 8px;
+    border-radius: 8px;
+    margin: 8px 0;
+    font-size: 1.2em;
+    color: #004085;
+}
+
+/* Adjust input field spacing */
+.input-column label {
+    margin-bottom: 0px !important;
+    margin-top: 0px !important;
+    font-size: 1.4em !important;
+    color: #555 !important;
+    font-weight: 500 !important;
+    display: block !important;
+    padding-top: 0px !important;
+}
+
+.input-column input, 
+.input-column textarea,
+.input-column select {
+    font-size: 1.0em !important;
+    background: white !important;
+    color: #333 !important;
+    border: 1px solid #d0d0d0 !important;
+    border-radius: 6px !important;
+    padding: 8px 12px !important;
+    margin-bottom: 0px !important;
+}
+
+/* Style for number inputs and dropdowns */
+input[type="number"],
+select {
+    background: white !important;
+    color: #333 !important;
+    border: 1px solid #d0d0d0 !important;
+    font-size: 1.2em !important;
+}
+
+/* Remove special styling from dropdown */
+.input-column select,
+.input-column .dropdown {
+    border: 1px solid #e0e0e0 !important;
+    box-shadow: none !important;
+}
+
+/* Dropdown container */
+.input-column div[class*="dropdown"] {
+    border: none !important;
+}
+
+/* Output text area */
+.output-column textarea {
+    background: white !important;
+    color: #333 !important;
+    border: 1px solid #d0d0d0 !important;
+    border-radius: 6px !important;
+    padding: 10px !important;
+    margin-top: 0px !important;
+    font-size: 1.1em !important;
+}
+
+/* Remove spacing in output column */
+.output-column .block,
+.output-column .gr-form > div,
+.output-column [class*="field"] {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* Output column label */
+.output-column label {
+    font-size: 1.2em !important;
+    margin-bottom: 0px !important;
+}
 
-# Create Gradio interface
-with gr.Blocks(title="DeepPersona - Character Generator") as demo:
-    gr.Markdown("# DeepPersona - Character Generator")
+/* Placeholder text */
+::placeholder {
+    color: #999 !important;
+}
+
+/* Remove ALL dark backgrounds from Gradio containers */
+.input-column .block,
+.input-column .form,
+.input-column > div,
+.input-column div[class*="block"],
+.input-column div[class*="form"],
+.output-column .block,
+.output-column .form,
+.output-column > div,
+.output-column div[class*="block"],
+.output-column div[class*="form"] {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Target ALL row containers */
+div[class*="gr-row"],
+.gr-row,
+.input-column .gr-row,
+.output-column .gr-row {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    gap: 12px !important;
+    margin: 0 !important;
+}
+
+/* Remove padding from form containers */
+div[class*="gr-form"],
+.gr-form,
+.input-column .gr-form {
+    background: transparent !important;
+    gap: 0px !important;
+    margin: 0 !important;
+}
+
+/* Style for individual input containers */
+div[class*="gr-box"],
+.gr-box,
+.input-column .gr-box {
+    background: transparent !important;
+    border: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* Reduce padding in all Gradio field containers */
+.input-column .gr-form > div,
+.input-column [class*="field"],
+.input-column .block {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* Target specific Gradio component wrappers */
+.input-column .wrap,
+.input-column .contain,
+.output-column .wrap,
+.output-column .contain {
+    padding: 0 !important;
+    margin: 0 !important;
+    gap: 0 !important;
+}
+
+/* Minimize spacing between form fields */
+.input-column > div > div > div {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* Remove extra spacing from Gradio's internal divs */
+.input-column div[data-testid],
+.input-column div[class*="svelte"] {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* Column spacing in rows */
+.input-column .gr-row > div {
+    margin: 0 !important;
+    padding: 0 2px !important;
+}
+
+/* Target container divs more aggressively */
+.input-column > div > div,
+.output-column > div > div {
+    background: transparent !important;
+}
+
+/* Specific fix for dropdown and number input containers */
+.input-column label + div,
+.output-column label + div {
+    background: transparent !important;
+    border: none !important;
+}
+"""
+
+# Create Gradio interface with modern design
+with gr.Blocks(
+    css=custom_css, 
+    title="DeepPersona - AI Character Generator", 
+    theme=gr.themes.Default(primary_hue="purple", secondary_hue="blue")
+) as demo:
+    # Header
+    gr.Markdown("<h1 class='header-text'>🎭 DeepPersona</h1>")
+    gr.Markdown("<p class='subtitle-text'>Generate Realistic AI Characters with Rich Personalities</p>")
     
-    if not check_api_key():
-        gr.Markdown("⚠️ **Warning**: OpenAI API key not detected. Please add OPENAI_API_KEY in Hugging Face Space settings.")
     
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("## Basic Information")
-            age = gr.Number(label="Age", minimum=1, maximum=120)
-            gender = gr.Dropdown(["Male", "Female"], label="Gender")
-            occupation = gr.Textbox(label="Occupation")
-            city = gr.Textbox(label="City")
-            country = gr.Textbox(label="Country")
+    # Main Content
+    with gr.Row(equal_height=True):
+        # Left Column - Inputs
+        with gr.Column(scale=2, elem_classes="input-column"):
+            gr.Markdown("<h3 class='section-header'>👤 Basic Information</h3>")
             
-            gr.Markdown("## Custom Values (Optional)")
-            custom_values = gr.Textbox(label="Personal Values", lines=3)
-            custom_life_attitude = gr.Textbox(label="Life Attitude", lines=3)
+            with gr.Row():
+                age = gr.Number(
+                    label="Age",
+                    minimum=1,
+                    maximum=120,
+                    placeholder="25"
+                )
+                gender = gr.Textbox(
+                    label="Gender",
+                    placeholder="Male, Female..."
+                )
             
-            generate_btn = gr.Button("Generate Character")
+            occupation = gr.Textbox(
+                label="Occupation",
+                placeholder="Software Engineer, Teacher, Artist..."
+            )
+            
+            with gr.Row():
+                city = gr.Textbox(
+                    label="City",
+                    placeholder="Mumbai, New York..."
+                )
+                country = gr.Textbox(
+                    label="Country",
+                    placeholder="India, USA..."
+                )
+            
+            gr.Markdown("<h3 class='section-header'>✨ Custom Values (Optional)</h3>")
+            
+            custom_values = gr.Textbox(
+                label="Personal Values",
+                lines=2,
+                placeholder="Values family, creativity, continuous learning..."
+            )
+            
+            custom_life_attitude = gr.Textbox(
+                label="Life Attitude",
+                lines=2,
+                placeholder="Optimistic and solution-oriented..."
+            )
+            
+            life_story = gr.Textbox(
+                label="Life Story",
+                lines=2,
+                placeholder="Born in a small town, moved to the city for education..."
+            )
+            
+            interests_hobbies = gr.Textbox(
+                label="Interests and Hobbies",
+                lines=2,
+                placeholder="Reading, hiking, photography, cooking..."
+            )
+            
+            gr.Markdown("<h3 class='section-header'>⚙️ Advanced Settings</h3>")
+            
+            attribute_count = gr.Slider(
+                minimum=100,
+                maximum=350,
+                value=200,
+                step=50,
+                label="Attribute Richness"
+            )
         
-        with gr.Column():
-            output = gr.Textbox(label="Generated Character", lines=10)
+        # Right Column - Output
+        with gr.Column(scale=3, elem_classes="output-column"):
+            gr.Markdown("<h3 class='section-header'>📝 Generated Character Profile</h3>")
+            
+            output = gr.Textbox(
+                label="",
+                lines=30,
+                placeholder="Your generated character profile will appear here...\n\nClick 'Generate Character Profile' to start!",
+                show_label=False,
+                container=False
+            )
+    
+    # Generate Button - Full Width
+    generate_btn = gr.Button(
+        "🚀 Generate Character Profile",
+        variant="primary",
+        size="lg",
+        elem_classes="generate-btn"
+    )
+    
+    # Footer
+    gr.Markdown(
+        """
+        <div style='text-align: center; margin-top: 30px; padding: 20px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+            <p style='color: #555; margin: 5px 0;'>
+                🌐 <a href='https://thzva.github.io/deeppersona.github.io/' target='_blank' style='color: #667eea; text-decoration: none; font-weight: 500;'>Project Homepage</a> | 
+                📊 <a href='https://huggingface.co/datasets/THzva/deeppersona_dataset' target='_blank' style='color: #667eea; text-decoration: none; font-weight: 500;'>Dataset</a> | 
+                💻 <a href='https://github.com/thzva/Deeppersona' target='_blank' style='color: #667eea; text-decoration: none; font-weight: 500;'>GitHub</a>
+            </p>
+            <p style='color: #888; font-size: 0.9em; margin-top: 10px;'>
+                Powered by GPT-4 • Built with ❤️ by DeepPersona Team
+            </p>
+        </div>
+        """
+    )
     
+    # Event Handler
     generate_btn.click(
         fn=generate_persona,
-        inputs=[age, gender, occupation, city, country, custom_values, custom_life_attitude],
+        inputs=[age, gender, occupation, city, country, custom_values, custom_life_attitude, life_story, interests_hobbies, attribute_count],
         outputs=output
     )
 
 # Launch application
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=False, server_name="127.0.0.1", server_port=7860)