app.js

import gradio as gr
import requests

# Replace with your model endpoint or HF Inference API
MODEL_URL = "https://api-inference.huggingface.co/models/YOUR_MODEL"
API_KEY = "YOUR_KEY"

headers = {"Authorization": f"Bearer {API_KEY}"}

def generate_react(prompt):
    if not prompt.strip():
        return "// No prompt provided."

    payload = {
        "inputs": f"Write React code for: {prompt}",
        "parameters": {"max_new_tokens": 400}
    }

    try:
        response = requests.post(MODEL_URL, headers=headers, json=payload)
        data = response.json()

        if isinstance(data, dict) and "error" in data:
            return f"// Model error: {data['error']}"

        return data[0]["generated_text"]
    except Exception as e:
        return f"// Error: {str(e)}"


with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
    gr.Markdown(
        """
        # ⚡ GhosTech React Code Generator  
        Type what you want and generate clean React components, hooks, utilities, or full pages.
        """
    )

    with gr.Row():
        with gr.Column(scale=1):
            prompt = gr.Textbox(
                label="Describe the React code you want",
                placeholder="Example: A React component that fetches weather data and displays it...",
                lines=6,
            )
            generate_btn = gr.Button("Generate React Code", variant="primary")

        with gr.Column(scale=1):
            output = gr.Code(
                label="Generated React Code",
                language="javascript",
                value="// Your generated code will appear here."
            )

    generate_btn.click(generate_react, inputs=prompt, outputs=output)

demo.launch()