added provider

app.py

@@ -1,48 +1,84 @@
 import gradio as gr
+from huggingface_hub import InferenceClient
 
-# Funktion zur Code-Generierung für Next.js, TypeScript und TailwindCSS
+# Function to generate code with proper error handling
 def generate_code(prompt):
-    """
-    Diese Funktion generiert Code basierend auf einem Benutzer-Prompt.
-    Sie simuliert die Interaktion mit dem DeepSeek-V3-Modell.
-    """
-    # Beispielantwort (kann durch eine echte API-Anfrage ersetzt werden)
-    example_response = f"""
-    // Generierter Code für: {prompt}
-    import React from 'react';
-
-    const MyComponent: React.FC = () => {{
-      return (
-        <div className="p-4 bg-blue-500 text-white">
-          <h1 className="text-2xl font-bold">Hello, Next.js mit TypeScript und TailwindCSS!</h1>
-          <p className="mt-2">Dies ist ein Beispiel für {prompt}.</p>
-        </div>
-      );
-    }};
-
-    export default MyComponent;
-    """
-    return example_response
+    try:
+        # Get the token from Gradio's secrets
+        token = gr.secrets["HF_TOKEN"]
+        
+        client = InferenceClient(
+            model="deepseek-ai/DeepSeek-V3",
+            token=token
+        )
+        
+        system_prompt = """You are an expert Next.js, TypeScript and TailwindCSS developer. 
+        Generate clean, efficient code following these rules:
+        1. Use Next.js App Router
+        2. Strict TypeScript typing
+        3. Modern TailwindCSS classes
+        4. Include proper error boundaries
+        5. Add JSDoc comments"""
+        
+        response = client.chat_completion(
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": prompt}
+            ],
+            max_tokens=1500,
+            temperature=0.3
+        )
+        
+        return response.choices[0].message.content
+        
+    except Exception as e:
+        return f"Error generating code: {str(e)}"
 
-# Gradio Interface
-with gr.Blocks(fill_height=True) as demo:
-    with gr.Sidebar():
-        gr.Markdown("# Next.js + TypeScript + TailwindCSS Code Generator")
-        gr.Markdown("Dieser Space hilft dir, Code für Next.js (mit App Router), TypeScript und TailwindCSS zu generieren.")
-        gr.Markdown("Gib deine Anforderungen ein und erhalte den passenden Code.")
+# Gradio interface with improved layout
+with gr.Blocks(
+    title="Next.js Code Generator",
+    theme=gr.themes.Soft(),
+    css=".gradio-container {max-width: 900px !important}"
+) as demo:
     
-    with gr.Column():
-        # Eingabefeld für den Benutzer-Prompt
-        user_prompt = gr.Textbox(label="Beschreibe deine Anforderungen", placeholder="z.B. Erstelle eine Komponente mit einem Button und einem Textfeld...")
-        
-        # Ausgabefeld für den generierten Code
-        code_output = gr.Code(label="Generierter Code", language="typescript")
+    gr.Markdown("## 🚀 Next.js + TypeScript + TailwindCSS Code Generator")
+    
+    with gr.Row():
+        with gr.Column(scale=3):
+            input_prompt = gr.Textbox(
+                label="Describe your component",
+                placeholder="Create a responsive navbar with dark mode toggle...",
+                lines=5,
+                max_lines=10
+            )
+            with gr.Row():
+                submit_btn = gr.Button("Generate Code", variant="primary")
+                clear_btn = gr.Button("Clear")
         
-        # Schaltfläche zum Generieren des Codes
-        generate_button = gr.Button("Code generieren")
+        with gr.Column(scale=7):
+            output_code = gr.Code(
+                label="Generated Component",
+                language="typescript",
+                interactive=False,
+                lines=25
+            )
+    
+    # Form submission handling
+    submit_btn.click(
+        fn=generate_code,
+        inputs=input_prompt,
+        outputs=output_code
+    )
     
-    # Interaktion: Button-Klick ruft die generate_code-Funktion auf
-    generate_button.click(fn=generate_code, inputs=user_prompt, outputs=code_output)
+    clear_btn.click(
+        fn=lambda: ("", ""),
+        inputs=None,
+        outputs=[input_prompt, output_code]
+    )
 
-# Starte die Gradio-App
-demo.launch()
+# Launch with sharing enabled
+if __name__ == "__main__":
+    demo.launch(
+        share=True,
+        auth=lambda u,p: True  # Remove this for production!
+    )