Create app.py

app.py

@@ -0,0 +1,318 @@
+import os
+import gradio as gr
+from groq import Groq
+from dotenv import load_dotenv
+
+# Load local .env file (useful for local testing)
+load_dotenv()
+
+# Safely retrieve the key from environment variables (Hugging Face Secrets)
+api_key = os.getenv("Roadmap_Key")
+
+if not api_key:
+    print("⚠️ Warning: 'Roadmap_Key' environment variable not found. Please set it in Hugging Face Space Secrets.")
+else:
+    print("API Key Loaded Successfully!")
+
+# Initialize the Groq client
+client = Groq(api_key=api_key)
+
+def generate_roadmap(domain, level, duration):
+    # Ensure the client is initialized with an API key before trying to make a call
+    if not api_key:
+        return "❌ Error: API Key missing. Please set 'Roadmap_Key' as a Secret in your Hugging Face Space settings."
+
+    if not domain.strip():
+        return "❌ Please enter a learning domain."
+
+    if not duration.strip():
+        return "❌ Please enter the learning duration."
+
+    prompt = f"""
+You are an expert learning mentor.
+
+Create a detailed roadmap.
+
+Domain: {domain}
+
+Level: {level}
+
+Duration: {duration}
+
+Generate:
+
+# Overview
+
+# Weekly Learning Plan
+
+# Resources
+
+# Practice Websites
+
+# Projects
+
+# Career Advice
+"""
+
+    try:
+        response = client.chat.completions.create(
+            model="llama-3.3-70b-versatile",
+            messages=[
+                {
+                    "role": "user",
+                    "content": prompt
+                }
+            ]
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        return f"❌ An error occurred during roadmap generation: {str(e)}"
+
+# Custom CSS styling for the interface
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght=300;400;600;700&display=swap');
+
+/* ---------- Overall Page ---------- */
+
+body{
+    font-family:'Inter',sans-serif;
+    background:#0f172a;
+}
+
+/* Wider app for desktop */
+.gradio-container{
+    max-width:1500px !important;
+    width:96% !important;
+    margin:auto !important;
+    background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
+}
+
+/* ---------- Title ---------- */
+
+.main-title{
+    text-align:center;
+    font-size:44px;
+    font-weight:700;
+    background:linear-gradient(90deg,#00DBDE,#FC00FF);
+    -webkit-background-clip:text;
+    -webkit-text-fill-color:transparent;
+    margin-bottom:8px;
+}
+
+.subtitle{
+    text-align:center;
+    color:#cbd5e1;
+    font-size:18px;
+    margin-bottom:30px;
+}
+
+/* ---------- Glass Cards ---------- */
+
+.glass{
+    background:rgba(255,255,255,0.08);
+    backdrop-filter:blur(16px);
+    border:1px solid rgba(255,255,255,0.12);
+    border-radius:18px;
+    padding:22px;
+    box-shadow:0 8px 30px rgba(0,0,0,.25);
+}
+
+/* ---------- Output ---------- */
+
+.output-box{
+    min-height:650px;
+    overflow:auto;
+}
+
+/* ---------- Buttons ---------- */
+
+button{
+    border-radius:12px !important;
+    font-weight:600 !important;
+    transition:.25s ease;
+}
+
+button:hover{
+    transform:translateY(-2px);
+}
+
+.generate-btn{
+    background:linear-gradient(90deg,#06b6d4,#3b82f6) !important;
+    color:white !important;
+}
+
+.clear-btn{
+    background:#ef4444 !important;
+    color:white !important;
+}
+
+/* ---------- Examples ---------- */
+
+.examples-table{
+    width:100% !important;
+    margin-top:20px;
+}
+
+.examples-table table{
+    width:100% !important;
+}
+
+.examples-table td{
+    white-space:normal !important;
+    word-break:break-word;
+    font-size:15px;
+    padding:12px !important;
+}
+
+/* ---------- Inputs ---------- */
+
+textarea,
+input{
+    font-size:16px !important;
+}
+
+/* ---------- Markdown Output ---------- */
+
+.prose{
+    font-size:16px !important;
+    line-height:1.8 !important;
+}
+
+/* ---------- Footer ---------- */
+
+.footer{
+    text-align:center;
+    color:#94a3b8;
+    margin-top:30px;
+    font-size:14px;
+}
+
+/* Hide Gradio Footer */
+
+footer{
+    visibility:hidden;
+}
+
+/* ---------- Desktop ---------- */
+
+@media (min-width:1200px){
+
+    .glass{
+        padding:26px;
+    }
+
+    .output-box{
+        min-height:700px;
+    }
+
+}
+
+/* ---------- Mobile ---------- */
+
+@media (max-width:768px){
+
+    .main-title{
+        font-size:34px;
+    }
+
+    .subtitle{
+        font-size:16px;
+    }
+
+}
+"""
+
+with gr.Blocks(
+    css=custom_css,
+    title="AI Learning Roadmap Generator",
+    theme=gr.themes.Soft()
+) as demo:
+
+    gr.HTML("""
+    <div class="main-title">
+        🚀 AI Learning Roadmap Generator
+    </div>
+
+    <div class="subtitle">
+        Personalized AI Powered Learning Plans using Groq
+    </div>
+    """)
+
+    with gr.Row():
+
+        with gr.Column(scale=1):
+
+            with gr.Group(elem_classes="glass"):
+
+                domain = gr.Textbox(
+                    label="🎯 Learning Domain",
+                    placeholder="Python, AI, Data Science, Flutter..."
+                )
+
+                level = gr.Dropdown(
+                    choices=[
+                        "Beginner",
+                        "Intermediate",
+                        "Advanced"
+                    ],
+                    value="Beginner",
+                    label="📚 Skill Level"
+                )
+
+                duration = gr.Textbox(
+                    label="⏳ Learning Duration",
+                    placeholder="Example: 3 Months"
+                )
+
+                with gr.Row():
+
+                    generate_btn = gr.Button(
+                        "✨ Generate Roadmap",
+                        elem_classes="generate-btn"
+                    )
+
+                    clear_btn = gr.ClearButton(
+                        components=[domain, level, duration],
+                        elem_classes="clear-btn"
+                    )
+
+                gr.Examples(
+                    examples=[
+                        ["Python","Beginner","3 Months"],
+                        ["Machine Learning","Intermediate","6 Months"],
+                        ["Cyber Security","Beginner","1 Year"],
+                        ["Flutter","Beginner","4 Months"],
+                        ["Data Science","Advanced","5 Months"]
+                    ],
+                    inputs=[domain, level, duration]
+                )
+
+        with gr.Column(scale=2):
+
+            with gr.Group(elem_classes=["glass","output-box"]):
+
+                roadmap_output = gr.Markdown(
+                    label="📄 Generated Roadmap"
+                )
+
+    generate_btn.click(
+        fn=generate_roadmap,
+        inputs=[
+            domain,
+            level,
+            duration
+        ],
+        outputs=roadmap_output
+    )
+
+    # Wire up the clear button to reset the output as well
+    clear_btn.add(roadmap_output)
+
+    gr.HTML("""
+    <div class="footer">
+        Built with ❤️ using Python • Gradio • Groq AI
+    </div>
+    """)
+
+# Launching the app on Hugging Face
+demo.launch()