app.py

# Updated UI Generator with Better Open-Source Model and DartPad/Expo Preview Support

import gradio as gr
from transformers import AutoTokenizer, AutoModelForCausalLM, TextGenerationPipeline
import torch
import re

# Use a smaller model for CPU support
model_id = "deepseek-ai/deepseek-coder-1.3b-instruct"

# Use CPU or GPU if available
device = 0 if torch.cuda.is_available() else -1

# Load tokenizer and model
print("Loading model...")
tokenizer = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(model_id, torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32)

# Build the generation pipeline
generator = TextGenerationPipeline(model=model, tokenizer=tokenizer, device=device)

def generate_ui(platform, framework, ui_prompt):
    prompt_template = f"""
You are a professional mobile developer.
Create a full {framework} UI code for {platform} based on this request:
"""
    full_prompt = prompt_template + f"\n{ui_prompt}\n" + "\nEnsure to include imports, widgets, and app structure."
    response = generator(full_prompt, max_new_tokens=512, do_sample=True, temperature=0.7)[0]['generated_text']

    # Extract only code block (removes echoed prompt if needed)
    code_match = re.search(r"(?s)(import .*?)$", response)
    code = code_match.group(1).strip() if code_match else response.strip()
    return code, generate_preview_link(code, framework)

def generate_preview_link(code, framework):
    if framework == "Flutter":
        return f"https://dartpad.dev/?id=custom&code={gr.utils.sanitize_html(code)[:1500]}"
    elif framework == "React Native":
        return f"https://snack.expo.dev/?code={gr.utils.sanitize_html(code)[:1500]}"
    else:
        return "Preview not available for this framework."

interface = gr.Interface(
    fn=generate_ui,
    inputs=[
        gr.Dropdown(["Android", "iOS"], label="Platform"),
        gr.Dropdown(["Flutter", "Kotlin XML", "SwiftUI", "React Native"], label="Framework"),
        gr.Textbox(lines=4, label="UI Prompt", placeholder="e.g. Login screen with email & password, dark theme")
    ],
    outputs=[
        gr.Code(label="Generated UI Code"),
        gr.Textbox(label="Preview Link")
    ],
    title="Prompt-to-UI Code Generator",
    description="Describe your screen and get UI code + preview for Flutter/React Native apps."
)

interface.launch()