Demo version

app.py

@@ -1,837 +1,187 @@
 import gradio as gr
-import zipfile
-import io
-import os
-from datetime import datetime
 import requests
+import os
 
-# Hugging Face API configuration
-HF_API_URL = "https://api-inference.huggingface.co/models/Qwen/Qwen3-0.6B"
-HF_TOKEN = os.environ.get("HF_TOKEN")  # Will be set in Hugging Face Spaces
+def generate_flutter_code(prompt, api_token=None):
+    """
+    Generate Flutter/Dart code using Hugging Face Inference API with Qwen 3 0.6B
+    """
+    if not api_token:
+        api_token = os.getenv("HF_TOKEN")
 
-def generate_code_with_ai(prompt, max_length=800):
-    """Generate code using the Hugging Face Inference API with Qwen model."""
-    try:
-        # Create a more specific prompt for Flutter/Dart code using Qwen's strengths
-        full_prompt = f"""You are an expert Flutter developer. Generate clean, working Dart code for this requirement:
+    if not api_token:
+        return "Error: Hugging Face API token is required. Please provide it in the input field or set HF_TOKEN environment variable."
 
-{prompt}
+    # Qwen 3 0.6B model for code generation
+    model_id = "Qwen/Qwen3-0.6B"
 
-IMPORTANT: Provide ONLY the Dart code without any explanations or markdown formatting.
-The code should be complete, functional, and follow Flutter best practices.
+    # Enhanced prompt for Flutter/Dart code generation
+    enhanced_prompt = f"""You are an expert Flutter/Dart developer. Generate high-quality, production-ready Flutter/Dart code based on the following description. Include proper error handling, state management, and follow Flutter best practices.
 
-```dart
-"""
+Description: {prompt}
 
-        headers = {"Authorization": f"Bearer {HF_TOKEN}"} if HF_TOKEN else {}
+Please provide:
+1. Complete Dart code with all necessary imports
+2. Proper widget structure
+3. State management if needed
+4. Comments explaining complex parts
+5. Error handling where appropriate
+
+Generate the code:"""
+
+    try:
+        # Hugging Face Inference API endpoint
+        api_url = f"https://api-inference.huggingface.co/models/{model_id}"
+
+        headers = {
+            "Authorization": f"Bearer {api_token}",
+            "Content-Type": "application/json"
+        }
 
         payload = {
-            "inputs": full_prompt,
+            "inputs": enhanced_prompt,
             "parameters": {
-                "max_length": max_length,
-                "temperature": 0.3,  # Lower temperature for more focused code generation
+                "max_new_tokens": 2048,
+                "temperature": 0.1,
+                "top_p": 0.95,
                 "do_sample": True,
-                "return_full_text": False,
-                "num_return_sequences": 1,
-                "top_p": 0.9,  # Better sampling for code
-                "repetition_penalty": 1.1,  # Reduce repetition
+                "return_full_text": False
             }
         }
 
-        response = requests.post(HF_API_URL, headers=headers, json=payload, timeout=30)
-        response.raise_for_status()
-
-        result = response.json()
-
-        if isinstance(result, list) and len(result) > 0:
-            generated_text = result[0].get("generated_text", "")
+        response = requests.post(api_url, headers=headers, json=payload, timeout=30)
+
+        if response.status_code == 200:
+            result = response.json()
+            if isinstance(result, list) and len(result) > 0:
+                generated_text = result[0].get("generated_text", "")
+                return generated_text.strip()
+            else:
+                return "Error: Unexpected response format from API"
+        elif response.status_code == 503:
+            return "Error: Model is currently loading. Please try again in a few moments."
+        elif response.status_code == 429:
+            return "Error: Rate limit exceeded. Please try again later."
         else:
-            generated_text = str(result)
-
-        # Clean up the generated text
-        code = generated_text.strip()
-
-        # Basic cleanup - try to extract Dart-like code
-        if "```dart" in code:
-            code = code.split("```dart")[1].split("```")[0]
-        elif "```" in code:
-            code = code.split("```")[1].split("```")[0]
-
-        # Remove any remaining markdown formatting
-        code = code.replace("```", "").strip()
-
-        # Additional cleanup for common issues
-        code = code.replace("dart\n", "").replace("Dart\n", "")
-
-        return code if code else "// Generated using Qwen 3 0.6B AI model\n// Please try rephrasing your request"
+            return f"Error: API request failed with status code {response.status_code}. Response: {response.text}"
 
+    except requests.exceptions.Timeout:
+        return "Error: Request timed out. The model might be busy."
+    except requests.exceptions.RequestException as e:
+        return f"Error: Network request failed: {str(e)}"
     except Exception as e:
-        print(f"Error generating code with AI: {e}")
-        return "// Error: AI service unavailable\n// Using fallback template"
-
-def generate_flutter_code(description):
-    """
-    Generate Flutter code files based on user description using Qwen 3 0.6B AI model.
-
-    Args:
-        description: User's description of the Flutter app/widget
+        return f"Error: Unexpected error occurred: {str(e)}"
 
-    Returns:
-        Tuple of (file_path, status_message, main_code, widgets_code, models_code, services_code)
-    """
-    
-    if not description or len(description.strip()) < 10:
-        error_message = "❌ Please provide a more detailed description (at least 10 characters)."
-        return None, error_message, "// Waiting for description", "// Waiting for description", "// Waiting for description", "// Waiting for description"
-    
-    try:
-        # Create timestamp for unique filenames
-        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
-        
-        # Create an in-memory ZIP file
-        zip_buffer = io.BytesIO()
-        
-        with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
-            
-            # Generate main.dart
-            main_dart = generate_main_dart(description)
-            zip_file.writestr('flutter_app/lib/main.dart', main_dart)
-            
-            # Generate widgets.dart
-            widgets_dart = generate_widgets_dart(description)
-            zip_file.writestr('flutter_app/lib/widgets.dart', widgets_dart)
-            
-            # Generate models.dart
-            models_dart = generate_models_dart(description)
-            zip_file.writestr('flutter_app/lib/models.dart', models_dart)
-            
-            # Generate services.dart
-            services_dart = generate_services_dart(description)
-            zip_file.writestr('flutter_app/lib/services.dart', services_dart)
-            
-            # Generate pubspec.yaml
-            pubspec = generate_pubspec(description)
-            zip_file.writestr('flutter_app/pubspec.yaml', pubspec)
-            
-            # Generate README.md
-            readme = generate_readme(description)
-            zip_file.writestr('flutter_app/README.md', readme)
-        
-        # Save the ZIP to a temporary file
-        zip_buffer.seek(0)
-        output_path = f"flutter_app_{timestamp}.zip"
-        
-        with open(output_path, 'wb') as f:
-            f.write(zip_buffer.getvalue())
-        
-        success_message = f"""
-✅ **Flutter code generated successfully using Qwen 3 0.6B!**
-
-🤖 **AI Model:** Qwen 3 0.6B (specialized for code generation)
-📝 **Your description:** {description[:100]}{'...' if len(description) > 100 else ''}
-
-📦 **Generated files:**
-- `lib/main.dart` - Main application entry point
-- `lib/widgets.dart` - Custom widgets with Material Design
-- `lib/models.dart` - Data models with JSON serialization
-- `lib/services.dart` - Business logic and validation services
-- `pubspec.yaml` - Project dependencies
-- `README.md` - Setup and usage instructions
-
-💡 **Next steps:**
-1. Download the ZIP file below
-2. Extract it to your desired location
-3. Run `flutter pub get` in the project directory
-4. Run `flutter run` to launch the app
-
-⚠️ **Important:** This is AI-generated code using Qwen 3 0.6B. While high-quality, always review and test before production use.
+# Gradio interface
+def create_interface():
+    with gr.Blocks(
+        title="Flutter Code Generator",
+        theme=gr.themes.Soft(),
+        css="""
+        .gradio-container {
+            max-width: 1200px;
+            margin: auto;
+        }
+        .title {
+            text-align: center;
+            color: #2563eb;
+            font-size: 2.5em;
+            font-weight: bold;
+            margin-bottom: 1em;
+        }
+        .subtitle {
+            text-align: center;
+            color: #64748b;
+            font-size: 1.2em;
+            margin-bottom: 2em;
+        }
         """
+    ) as interface:
+        gr.HTML("""
+        <div class="title">🚀 Flutter Code Generator</div>
+        <div class="subtitle">Transform your ideas into Flutter/Dart code using AI</div>
+        """)
 
-        return output_path, success_message, main_dart, widgets_dart, models_dart, services_dart
-        
-    except Exception as e:
-        error_message = f"❌ Error generating Flutter code: {str(e)}"
-        return None, error_message, "// Error occurred", "// Error occurred", "// Error occurred", "// Error occurred"
-
-
-def generate_main_dart(description):
-    """Generate the main.dart file content using Qwen AI."""
-    prompt = f"""Generate a complete Flutter main.dart file for: {description}
-
-Requirements:
-1. Import necessary packages (flutter/material.dart)
-2. Create main() function
-3. Create MyApp widget extending StatelessWidget
-4. Include MaterialApp with proper theme
-5. Create a basic HomePage widget
-6. Include app bar and basic layout
-7. Use modern Flutter syntax with const constructors
-
-Code structure:
-```dart
-import 'package:flutter/material.dart';
-
-void main() => runApp(const MyApp());
-
-class MyApp extends StatelessWidget {{
-  const MyApp({{super.key}});
-
-  @override
-  Widget build(BuildContext context) {{
-    return MaterialApp(
-      title: 'Generated App',
-      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
-      home: const HomePage(),
-    );
-  }}
-}}
-
-class HomePage extends StatelessWidget {{
-  const HomePage({{super.key}});
-
-  @override
-  Widget build(BuildContext context) {{
-    return Scaffold(
-      appBar: AppBar(title: const Text('Home')),
-      body: const Center(child: Text('Welcome to your app!')),
-    );
-  }}
-}}
-```"""
-
-    ai_generated_code = generate_code_with_ai(prompt, max_length=1000)
-
-    # Add header comment
-    header = f"""// AI-Generated Flutter Application
-// Description: {description}
-// Generated: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
-// Note: This is AI-generated code - review and test before production use
-
-"""
-
-    return header + ai_generated_code
-
-
-def generate_widgets_dart(description):
-    """Generate the widgets.dart file content using Qwen AI."""
-    prompt = f"""Generate Flutter custom widgets for: {description}
-
-Create at least 3 reusable widgets with proper documentation:
-
-1. CustomInfoCard - A styled card widget for displaying information
-2. CustomButton - An enhanced button with loading states
-3. CustomTextField - A styled text input field
-
-Requirements:
-- Use proper Dart documentation comments (///)
-- Include null safety and const constructors
-- Follow Material Design guidelines
-- Include proper parameter validation
-- Use modern Flutter patterns
-
-Example structure:
-```dart
-import 'package:flutter/material.dart';
-
-/// Custom info card widget for displaying content
-class CustomInfoCard extends StatelessWidget {{
-  final String title;
-  final String description;
-  final IconData? icon;
-  final Color? backgroundColor;
-
-  const CustomInfoCard({{
-    super.key,
-    required this.title,
-    required this.description,
-    this.icon,
-    this.backgroundColor,
-  }});
-
-  @override
-  Widget build(BuildContext context) {{
-    return Card(
-      elevation: 4,
-      color: backgroundColor,
-      margin: const EdgeInsets.all(16),
-      child: Padding(
-        padding: const EdgeInsets.all(20),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            if (icon != null) ...[
-              Icon(icon, size: 48, color: Theme.of(context).primaryColor),
-              const SizedBox(height: 12),
-            ],
-            Text(
-              title,
-              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
-                fontWeight: FontWeight.bold,
-              ),
-              textAlign: TextAlign.center,
-            ),
-            const SizedBox(height: 8),
-            Text(
-              description,
-              style: Theme.of(context).textTheme.bodyMedium,
-              textAlign: TextAlign.center,
-            ),
-          ],
-        ),
-      ),
-    );
-  }}
-}}
-```"""
-
-    ai_generated_code = generate_code_with_ai(prompt, max_length=1200)
-
-    # Add header comment
-    header = f"""// Custom Widgets for the Flutter Application
-// Description: {description}
-// Generated: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
-// Note: This is AI-generated code - review and test before production use
-
-"""
-
-    return header + ai_generated_code
-
-
-def generate_models_dart(description):
-    """Generate the models.dart file content using Qwen AI."""
-    prompt = f"""Generate Flutter data models for: {description}
-
-Create comprehensive data models with:
-1. Proper class structure with const constructors
-2. JSON serialization (toJson/fromJson)
-3. CopyWith methods for immutable updates
-4. Proper type annotations and null safety
-5. Documentation comments
-6. At least 2-3 models relevant to the app
-
-Requirements:
-- Use final fields for immutability
-- Include proper error handling in fromJson
-- Add copyWith for state management
-- Use meaningful field names
-
-Example structure:
-```dart
-/// Represents a task or item in the application
-class Item {{
-  final String id;
-  final String title;
-  final String description;
-  final DateTime createdAt;
-  final DateTime? updatedAt;
-  final bool isCompleted;
-  final String? category;
-
-  const Item({{
-    required this.id,
-    required this.title,
-    required this.description,
-    required this.createdAt,
-    this.updatedAt,
-    this.isCompleted = false,
-    this.category,
-  }});
-
-  /// Convert to JSON for storage/API calls
-  Map<String, dynamic> toJson() => {{
-    'id': id,
-    'title': title,
-    'description': description,
-    'createdAt': createdAt.toIso8601String(),
-    'updatedAt': updatedAt?.toIso8601String(),
-    'isCompleted': isCompleted,
-    'category': category,
-  }};
-
-  /// Create from JSON data
-  factory Item.fromJson(Map<String, dynamic> json) => Item(
-    id: json['id'] as String? ?? '',
-    title: json['title'] as String? ?? '',
-    description: json['description'] as String? ?? '',
-    createdAt: DateTime.tryParse(json['createdAt'] as String? ?? '') ?? DateTime.now(),
-    updatedAt: json['updatedAt'] != null
-        ? DateTime.tryParse(json['updatedAt'] as String)
-        : null,
-    isCompleted: json['isCompleted'] as bool? ?? false,
-    category: json['category'] as String?,
-  );
-
-  /// Create a copy with updated fields
-  Item copyWith({{
-    String? id,
-    String? title,
-    String? description,
-    DateTime? createdAt,
-    DateTime? updatedAt,
-    bool? isCompleted,
-    String? category,
-  }}) => Item(
-    id: id ?? this.id,
-    title: title ?? this.title,
-    description: description ?? this.description,
-    createdAt: createdAt ?? this.createdAt,
-    updatedAt: updatedAt ?? this.updatedAt,
-    isCompleted: isCompleted ?? this.isCompleted,
-    category: category ?? this.category,
-  );
-}}
-```"""
-
-    ai_generated_code = generate_code_with_ai(prompt, max_length=1000)
-
-    # Add header comment
-    header = f"""// Data Models for the Flutter Application
-// Description: {description}
-// Generated: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
-// Note: This is AI-generated code - review and test before production use
-
-"""
-
-    return header + ai_generated_code
-
-
-def generate_services_dart(description):
-    """Generate the services.dart file content using Qwen AI."""
-    prompt = f"""Generate Flutter service classes for: {description}
-
-Create comprehensive service classes with:
-1. DataService - For managing application data (CRUD operations)
-2. ValidationService - For input validation and utilities
-3. Proper error handling and state management
-4. Documentation comments
-5. Null safety and modern Dart patterns
-
-Requirements:
-- Use proper async/await patterns where applicable
-- Include error handling with try-catch blocks
-- Add meaningful method names and documentation
-- Use immutable data structures where possible
-
-Example structure:
-```dart
-import 'dart:convert';
-import 'models.dart';
-
-/// Service for managing application data and business logic
-class DataService {{
-  final List<Item> _items = [];
-
-  /// Get all items (returns unmodifiable list)
-  List<Item> getAllItems() => List.unmodifiable(_items);
-
-  /// Get items by completion status
-  List<Item> getItems({{bool? completed}}) {{
-    if (completed == null) return getAllItems();
-    return _items.where((item) => item.isCompleted == completed).toList();
-  }}
-
-  /// Add a new item to the collection
-  void addItem(Item item) {{
-    _items.add(item);
-  }}
-
-  /// Update an existing item by ID
-  bool updateItem(String id, Item updatedItem) {{
-    final index = _items.indexWhere((item) => item.id == id);
-    if (index != -1) {{
-      _items[index] = updatedItem;
-      return true;
-    }}
-    return false;
-  }}
-
-  /// Remove an item by ID
-  bool deleteItem(String id) {{
-    final index = _items.indexWhere((item) => item.id == id);
-    if (index != -1) {{
-      _items.removeAt(index);
-      return true;
-    }}
-    return false;
-  }}
-
-  /// Toggle completion status of an item
-  bool toggleItemCompletion(String id) {{
-    final index = _items.indexWhere((item) => item.id == id);
-    if (index != -1) {{
-      _items[index] = _items[index].copyWith(
-        isCompleted: !_items[index].isCompleted,
-        updatedAt: DateTime.now(),
-      );
-      return true;
-    }}
-    return false;
-  }}
-
-  /// Clear all items
-  void clearAll() {{
-    _items.clear();
-  }}
-}}
-
-/// Utility service for validation and data processing
-class ValidationService {{
-  /// Validate email format using regex
-  static bool isValidEmail(String email) {{
-    final emailRegex = RegExp(
-      r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{{2,}}$',
-    );
-    return emailRegex.hasMatch(email);
-  }}
-
-  /// Check if string is not null or empty
-  static bool isNotEmpty(String? value) {{
-    return value != null && value.trim().isNotEmpty;
-  }}
-
-  /// Check minimum length requirement
-  static bool hasMinLength(String value, int minLength) {{
-    return value.length >= minLength;
-  }}
-
-  /// Validate item data before saving
-  static String? validateItem(Item item) {{
-    if (!isNotEmpty(item.title)) {{
-      return 'Title cannot be empty';
-    }}
-    if (!hasMinLength(item.title, 3)) {{
-      return 'Title must be at least 3 characters long';
-    }}
-    if (!isNotEmpty(item.description)) {{
-      return 'Description cannot be empty';
-    }}
-    return null; // No validation errors
-  }}
-}}
-```"""
-
-    ai_generated_code = generate_code_with_ai(prompt, max_length=1000)
-
-    # Add header comment
-    header = f"""// Business Logic and Services
-// Description: {description}
-// Generated: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
-// Note: This is AI-generated code - review and test before production use
-
-"""
-
-    return header + ai_generated_code
-
-
-def generate_pubspec(description):
-    """Generate the pubspec.yaml file content."""
-    return f"""# Flutter Project Configuration
-# Description: {description}
-# Generated: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
-
-name: flutter_app
-description: AI-generated Flutter application
-publish_to: 'none'
-
-version: 1.0.0+1
-
-environment:
-  sdk: '>=3.0.0 <4.0.0'
-
-dependencies:
-  flutter:
-    sdk: flutter
-  
-  # UI Components
-  cupertino_icons: ^1.0.6
-  
-  # State Management (uncomment as needed)
-  # provider: ^6.1.1
-  # riverpod: ^2.4.9
-  
-  # Networking (uncomment as needed)
-  # http: ^1.1.0
-  # dio: ^5.4.0
-  
-  # Local Storage (uncomment as needed)
-  # shared_preferences: ^2.2.2
-  # hive: ^2.2.3
-
-dev_dependencies:
-  flutter_test:
-    sdk: flutter
-  flutter_lints: ^3.0.1
-
-flutter:
-  uses-material-design: true
-  
-  # Assets (uncomment and configure as needed)
-  # assets:
-  #   - assets/images/
-  #   - assets/icons/
-  
-  # Fonts (uncomment and configure as needed)
-  # fonts:
-  #   - family: CustomFont
-  #     fonts:
-  #       - asset: fonts/CustomFont-Regular.ttf
-  #       - asset: fonts/CustomFont-Bold.ttf
-  #         weight: 700
-"""
-
-
-def generate_readme(description):
-    """Generate the README.md file content."""
-    return f"""# Flutter Application
-
-🤖 **AI-Generated Flutter Project**
-
-## Description
-
-{description}
-
----
-
-## 📋 Project Structure
-
-```
-flutter_app/
-├── lib/
-│   ├── main.dart          # Application entry point
-│   ├── widgets.dart       # Custom UI widgets
-│   ├── models.dart        # Data models
-│   └── services.dart      # Business logic and services
-├── pubspec.yaml           # Project dependencies
-└── README.md              # This file
-```
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-- Flutter SDK (>=3.0.0)
-- Dart SDK
-- IDE (VS Code, Android Studio, or IntelliJ)
-
-### Installation
-
-1. **Extract the ZIP file** to your desired location
-
-2. **Navigate to the project directory**
-   ```bash
-   cd flutter_app
-   ```
-
-3. **Install dependencies**
-   ```bash
-   flutter pub get
-   ```
-
-4. **Run the app**
-   ```bash
-   flutter run
-   ```
-
-## 🛠️ Customization
-
-This is a generated starter project. You may want to:
-
-- ✏️ Modify the UI in `lib/widgets.dart`
-- 📊 Add more data models in `lib/models.dart`
-- ⚙️ Extend business logic in `lib/services.dart`
-- 📦 Add dependencies in `pubspec.yaml`
-
-## 📱 Building for Production
-
-### Android
-```bash
-flutter build apk --release
-```
-
-### iOS
-```bash
-flutter build ios --release
-```
-
-### Web
-```bash
-flutter build web --release
-```
-
-## 🧪 Testing
-
-Run tests with:
-```bash
-flutter test
-```
-
-## 📚 Resources
-
-- [Flutter Documentation](https://docs.flutter.dev/)
-- [Dart Documentation](https://dart.dev/guides)
-- [Flutter Cookbook](https://docs.flutter.dev/cookbook)
-
-## ⚠️ Important Notes
-
-- This code was AI-generated and serves as a starting point
-- Review and test all code before production use
-- Customize the app according to your specific requirements
-- Add proper error handling and validation
-
-## 📄 License
-
-This project is generated for educational and development purposes.
-
----
-
-Generated on: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
-"""
-
-
-# Create the Gradio interface
-def create_interface():
-    """Create and configure the Gradio interface."""
-    
-    with gr.Blocks(theme=gr.themes.Soft(), title="Flutter Code Generator") as demo:
-        gr.Markdown(
-            """
-            # 🚀 AI Flutter Code Generator
-            
-            Generate complete Flutter applications from natural language descriptions!
-            
-            ### How to use:
-            1. Describe the Flutter app or widget you want to build
-            2. Click "Generate Flutter Code"
-            3. Download the ZIP file containing your Flutter project
-            4. Extract and run with `flutter pub get` then `flutter run`
-            """
-        )
-        
         with gr.Row():
             with gr.Column(scale=2):
-                description_input = gr.Textbox(
-                    label="Describe your Flutter app",
-                    placeholder="Example: Create a todo list app with Material Design, featuring add/delete/edit functionality, local storage, and a clean modern UI with animations...",
+                prompt_input = gr.Textbox(
+                    label="Describe your Flutter component or feature",
+                    placeholder="e.g., Create a login form with email and password fields, validation, and submit button...",
                     lines=6,
-                    max_lines=10
+                    show_copy_button=True
                 )
 
-                gr.Markdown(
-                    """
-                    **💡 Tips for better results:**
-                    - Be specific about features and functionality
-                    - Mention UI/UX preferences (Material Design, Cupertino, etc.)
-                    - Include details about data storage needs
-                    - Describe any animations or interactions
-                    """
+                api_token_input = gr.Textbox(
+                    label="Hugging Face API Token (optional)",
+                    placeholder="Enter your HF token or set HF_TOKEN env variable",
+                    type="password",
+                    show_copy_button=True
                 )
 
                 generate_btn = gr.Button(
-                    "🎨 Generate Flutter Code with Qwen 3 0.6B",
+                    "Generate Flutter Code ✨",
                     variant="primary",
                     size="lg"
                 )
 
-            with gr.Column(scale=1):
-                status_output = gr.Markdown(
-                    label="Status",
-                    value="👋 Ready to generate your Flutter app!"
-                )
-
-                file_output = gr.File(
-                    label="📦 Download Flutter Project",
-                    type="filepath"
-                )
-
-        # Code preview tabs
-        with gr.Tabs():
-            with gr.TabItem("📱 main.dart"):
-                main_code_output = gr.Code(
-                    label="Main Application Code",
-                    language="dart",
-                    lines=20,
-                    value="// Click 'Generate Flutter Code' to see your main.dart code here"
-                )
-
-            with gr.TabItem("🎨 widgets.dart"):
-                widgets_code_output = gr.Code(
-                    label="Custom Widgets Code",
+            with gr.Column(scale=3):
+                output_code = gr.Code(
+                    label="Generated Flutter/Dart Code",
                     language="dart",
                     lines=20,
-                    value="// Click 'Generate Flutter Code' to see your widgets.dart code here"
+                    show_copy_button=True
                 )
 
-            with gr.TabItem("📊 models.dart"):
-                models_code_output = gr.Code(
-                    label="Data Models Code",
-                    language="dart",
-                    lines=20,
-                    value="// Click 'Generate Flutter Code' to see your models.dart code here"
-                )
-
-            with gr.TabItem("⚙️ services.dart"):
-                services_code_output = gr.Code(
-                    label="Business Logic Code",
-                    language="dart",
-                    lines=20,
-                    value="// Click 'Generate Flutter Code' to see your services.dart code here"
-                )
-        
-        gr.Markdown(
-            """
-            ---
-            
-            ### 📝 What's included in the generated ZIP:
-            - **main.dart** - Application entry point with basic structure
-            - **widgets.dart** - Reusable custom widgets
-            - **models.dart** - Data models and structures
-            - **services.dart** - Business logic and services
-            - **pubspec.yaml** - Flutter dependencies configuration
-            - **README.md** - Setup and usage instructions
-            
-            ### ⚠️ Important Notes:
-            - This uses **Qwen 3 0.6B** - a powerful AI model optimized for code generation
-            - The AI generates Flutter/Dart code based on your description
-            - Always review and test generated code before production use
-            - The AI service may occasionally be slow or unavailable - try again if needed
-            - Customize the generated code to match your specific requirements
-            
-            ### 🔧 Next Steps After Download:
-            1. Extract the ZIP file
-            2. Open terminal in the project directory
-            3. Run `flutter pub get` to install dependencies
-            4. Run `flutter run` to launch the app
-            5. Customize and extend the generated code
-            """
-        )
-        
-        # Connect the button to the generation function
+        with gr.Accordion("How to use", open=False):
+            gr.Markdown("""
+            ### Getting Started
+            1. **Describe your component**: Write a clear description of the Flutter component you want to create
+            2. **API Token**: Get your token from [Hugging Face](https://huggingface.co/settings/tokens) or set `HF_TOKEN` environment variable
+            3. **Generate**: Click the button to generate production-ready Flutter/Dart code
+
+            ### Tips for Better Results
+            - Be specific about the UI components, layout, and functionality
+            - Mention state management needs (e.g., "using Provider" or "using setState")
+            - Specify styling preferences (colors, themes, responsive design)
+            - Include error handling requirements
+            - Mention any specific Flutter packages to use
+
+            ### Example Prompts
+            - "Create a shopping cart component with add/remove items, quantity counter, and total price calculation"
+            - "Build a weather app screen with current conditions, 7-day forecast, and location search using Riverpod"
+            - "Design a user profile page with avatar, edit form, and save functionality"
+            """)
+
+        # Event handling
         generate_btn.click(
             fn=generate_flutter_code,
-            inputs=[description_input],
-            outputs=[file_output, status_output, main_code_output, widgets_code_output, models_code_output, services_code_output]
+            inputs=[prompt_input, api_token_input],
+            outputs=output_code,
+            api_name="generate_code"
         )
-        
-        # Add example buttons
+
+        # Examples
         gr.Examples(
             examples=[
-                ["Create a weather app with current conditions, 5-day forecast, and location search using Material Design"],
-                ["Build a chat application with real-time messaging, user authentication, and a modern gradient UI"],
-                ["Design a fitness tracker with workout logging, progress charts, and goal setting features"],
-                ["Make a recipe app with search, favorites, step-by-step instructions, and shopping list generation"],
+                ["Create a beautiful login screen with email/password fields, remember me checkbox, and social login buttons"],
+                ["Build a product card widget with image, title, price, rating stars, and add to cart button"],
+                ["Design a settings page with toggle switches, dropdown menus, and theme selector"],
+                ["Create a chat message bubble component with sender info, timestamp, and message status"],
+                ["Build a dashboard with statistics cards, charts, and navigation drawer"]
             ],
-            inputs=[description_input],
-            label="📚 Example Prompts"
+            inputs=prompt_input,
+            label="Example prompts to try:"
         )
-    
-    return demo
 
+    return interface
 
 # Launch the app
 if __name__ == "__main__":
-    demo = create_interface()
-    demo.launch(
-        server_name="0.0.0.0",  # Required for Hugging Face Spaces
-        server_port=7860,         # Default port for Hugging Face Spaces
-        share=False
-    )
+    interface = create_interface()
+    interface.queue(max_size=10)  # Enable queuing for multiple users
+    interface.launch(
+        server_name="0.0.0.0",
+        server_port=int(os.getenv("PORT", 7860)),
+        show_error=True,
+        share=False  # Set to True for public sharing on HF Spaces
+    )