Create app.py

app.py

@@ -0,0 +1,106 @@
+# === Imports ===
+import gradio as gr
+import requests
+import os
+import torch
+from transformers import BlipProcessor, BlipForConditionalGeneration
+from PIL import Image
+
+# === GROQ API KEY (you must insert manually or via secrets) ===
+GROQ_API_KEY = "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"  # Replace in Colab manually
+MODEL_NAME = "llama3-8b-8192"
+
+# === BLIP Image Captioning Model ===
+processor = BlipProcessor.from_pretrained("Salesforce/blip-image-captioning-base")
+blip_model = BlipForConditionalGeneration.from_pretrained("Salesforce/blip-image-captioning-base")
+
+def caption_image(image_path):
+    raw_image = Image.open(image_path).convert('RGB')
+    inputs = processor(raw_image, return_tensors="pt")
+    out = blip_model.generate(**inputs)
+    caption = processor.decode(out[0], skip_special_tokens=True)
+    return caption
+
+# === Build Prompt ===
+def build_prompt(description):
+    return f"""
+You are a front-end developer AI assistant.
+Write clean, responsive HTML, CSS, and JavaScript code for the following UI design:
+
+\"\"\"{description}\"\"\"
+
+Return a single complete HTML file including <style> and <script> blocks.
+"""
+
+# === Query Groq API ===
+def query_groq(prompt):
+    url = "https://api.groq.com/openai/v1/chat/completions"
+    headers = {
+        "Authorization": f"Bearer {GROQ_API_KEY}",
+        "Content-Type": "application/json"
+    }
+    body = {
+        "model": MODEL_NAME,
+        "messages": [
+            {"role": "system", "content": "You generate front-end code."},
+            {"role": "user", "content": prompt}
+        ],
+        "temperature": 0.4
+    }
+
+    response = requests.post(url, headers=headers, json=body)
+    
+    try:
+        result = response.json()
+        if "choices" in result:
+            return result["choices"][0]["message"]["content"]
+        else:
+            # Print full error for debug
+            return f"❌ API Error: {result.get('error', 'Unknown error')}\n\nFull response:\n{result}"
+    except Exception as e:
+        return f"❌ Exception occurred: {str(e)}"
+
+# === Save Code to File ===
+def save_code(code):
+    path = "/tmp/generated_ui.html"
+    with open(path, "w") as f:
+        f.write(code)
+    return path
+
+# === Main Inference Function ===
+def generate_ui_code(input_type, text_description, image_file):
+    if text_description.strip():
+        final_description = text_description
+        prompt = build_prompt(final_description)
+        code = query_groq(prompt)
+        filepath = save_code(code)
+        return code, filepath
+    else:
+        return "Please provide a description.", None
+
+with gr.Blocks(title="Frontend UI Code Generator with Groq") as demo:
+    gr.Markdown("## ✨ Generate Frontend Code from Design Description or Image")
+
+    input_type = gr.Radio(["Text Description", "Design Image"], label="Select Input Type", value="Text Description")
+
+    with gr.Row(visible=True) as row_text:
+        text_description = gr.Textbox(label="Enter UI Design Description", lines=4, placeholder="e.g. A signup form with 3 fields and a button")
+
+    with gr.Row(visible=False) as row_image:
+        image_file = gr.Image(type="filepath", label="Upload UI Design Image")
+
+    input_type.change(fn=lambda t: (t == "Text Description", t == "Design Image"),
+                      inputs=input_type,
+                      outputs=[row_text, row_image])
+
+    submit_btn = gr.Button("🚀 Generate Code")
+    code_output = gr.Code(label="🧠 Generated HTML Code", language="html")
+    download_btn = gr.File(label="⬇️ Download HTML File")
+
+    submit_btn.click(
+        fn=generate_ui_code,
+        inputs=[input_type, text_description, image_file],
+        outputs=[code_output, download_btn]
+    )
+
+demo.launch(debug=True)