Create app.js

app.js

@@ -0,0 +1,57 @@
+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()