Upload folder using huggingface_hub

app/api/completion/route.ts

@@ -0,0 +1,111 @@
+import { createHuggingFace } from '@ai-sdk/huggingface';
+import { createOpenAI } from '@ai-sdk/openai';
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { createGoogleGenerativeAI } from '@ai-sdk/google';
+import { streamText, toTextStreamResponse } from 'ai';
+import { NextRequest } from 'next/server';
+
+// Create provider instances with proper configuration
+const huggingface = createHuggingFace({
+  apiKey: process.env.HUGGINGFACE_API_KEY,
+  // Use the default base URL: https://router.huggingface.co/v1
+});
+
+const openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+const anthropic = createAnthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY,
+});
+
+const google = createGoogleGenerativeAI({
+  apiKey: process.env.GOOGLE_API_KEY,
+});
+
+// Get provider and model from request
+const getProviderForModel = (modelName: string) => {
+  if (modelName.includes('deepseek-ai') || modelName.includes('Qwen') || 
+      modelName.includes('moonshotai') || modelName.includes('zai-org') || 
+      modelName.includes('MiniMaxAI') || modelName.includes('meta-llama') || 
+      modelName.includes('gemma')) {
+    return huggingface;
+  }
+  if (modelName.includes('gpt')) {
+    return openai;
+  }
+  if (modelName.includes('claude')) {
+    return anthropic;
+  }
+  if (modelName.includes('gemini')) {
+    return google;
+  }
+  
+  // Default to Hugging Face for unknown models
+  return huggingface;
+};
+
+export async function POST(req: NextRequest) {
+  try {
+    const { messages, model } = await req.json();
+
+    if (!model) {
+      return new Response('Model is required', { status: 400 });
+    }
+
+    if (!messages || !Array.isArray(messages)) {
+      return new Response('Messages array is required', { status: 400 });
+    }
+
+    const provider = getProviderForModel(model);
+    
+    // Convert messages to the format expected by AI SDK
+    const systemMessage = messages.find((m: any) => m.role === 'system');
+    const userMessages = messages
+      .filter((m: any) => m.role === 'user')
+      .map((m: any) => m.content)
+      .join('\n\n');
+
+    const messagesToSend = systemMessage ? [systemMessage.content, userMessages] : [userMessages];
+
+    // Use streamText with proper Hugging Face streaming
+    const result = await streamText({
+      model: provider(model),
+      messages: messagesToSend,
+      maxTokens: 2000,
+      temperature: 0.7,
+      topP: 0.9,
+      presencePenalty: 0.1,
+      frequencyPenalty: 0.1,
+      onError: ({ error }) => {
+        console.error('Stream error:', error);
+      },
+    });
+
+    // Return the streaming response
+    return result.toTextStreamResponse();
+  } catch (error) {
+    console.error('AI API Error:', error);
+    
+    // Return a helpful error message
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+    
+    return new Response(JSON.stringify({
+      error: 'Failed to process AI request',
+      details: errorMessage,
+      message: 'Please check your API keys and model configuration. Make sure you have a valid API key for the selected model provider.',
+      model: model || 'unknown',
+      provider: model ? getProviderForModel(model).constructor.name : 'unknown'
+    }), {
+      status: 500,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+}
+
+// Support both POST and GET for compatibility
+export async function GET(req: NextRequest) {
+  return POST(req);
+}

app/globals.css

@@ -0,0 +1,98 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Monaco Editor custom styles */
+.monaco-editor-container {
+  @apply rounded-lg border border-border overflow-hidden;
+}
+
+/* Custom scrollbar for code areas */
+.code-area::-webkit-scrollbar {
+  width: 6px;
+}
+
+.code-area::-webkit-scrollbar-track {
+  @apply bg-muted;
+}
+
+.code-area::-webkit-scrollbar-thumb {
+  @apply bg-muted-foreground/30 rounded-full;
+}
+
+.code-area::-webkit-scrollbar-thumb:hover {
+  @apply bg-muted-foreground/50;
+}

app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "DeepSite - AI-Powered Vibe Coding Platform",
+  description: "Integrate generative AI into your coding projects to enhance creativity and productivity",
+  keywords: ["AI", "coding", "development", "generative AI", "programming"],
+  authors: [{ name: "MiniMax Agent" }],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body className={inter.className}>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useCompletion } from 'ai/react';
+import { ChevronLeft, ChevronRight, Code, Send, Settings, Zap, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { CodeEditor } from '@/components/code-editor';
+import { ModelSelector } from '@/components/model-selector';
+import { ConversationPanel } from '@/components/conversation-panel';
+import { supportedModels } from '@/components/providers';
+import { createHuggingFace } from '@ai-sdk/huggingface';
+
+export default function HomePage() {
+  const [activeTab, setActiveTab] = useState('editor');
+  const [code, setCode] = useState('// Welcome to DeepSite - AI-Powered Vibe Coding Platform\n// Start coding with AI assistance!\n\nfunction helloWorld() {\n  console.log("Hello, AI-powered coding!");\n  return "Ready to code with AI? 🚀";\n}');
+  
+  const [selectedModel, setSelectedModel] = useState('deepseek-ai/DeepSeek-V3-0324');
+  const [prompt, setPrompt] = useState('');
+  
+  const { completion, isLoading, complete } = useCompletion({
+    model: selectedModel,
+    api: '/api/completion',
+  });
+
+  const handlePromptSubmit = useCallback(async (userPrompt: string) => {
+    if (!userPrompt.trim()) return;
+    
+    try {
+      await complete(`
+Context: I have the following code in my editor:
+\`\`\`
+${code}
+\`\`\`
+
+Task: ${userPrompt}
+
+Please provide a helpful response and/or code modifications that address this task. Be specific and provide working code when possible.
+      `);
+    } catch (error) {
+      console.error('Error completing task:', error);
+    }
+  }, [code, complete]);
+
+  const handleSend = useCallback(() => {
+    if (prompt.trim()) {
+      handlePromptSubmit(prompt);
+      setPrompt('');
+    }
+  }, [prompt, handlePromptSubmit]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      handleSend();
+    }
+  }, [handleSend]);
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border bg-card/50 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                  <Code className="w-4 h-4 text-white" />
+                </div>
+                <div>
+                  <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                    DeepSite
+                  </h1>
+                  <p className="text-sm text-muted-foreground">AI-Powered Vibe Coding</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-4">
+              <Badge variant="secondary" className="text-xs">
+                <Sparkles className="w-3 h-3 mr-1" />
+                Powered by AI SDK Elements
+              </Badge>
+              <ModelSelector
+                selectedModel={selectedModel}
+                onModelChange={setSelectedModel}
+                models={Object.keys(supportedModels)}
+              />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-4 py-6">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <div className="flex items-center justify-between mb-6">
+            <TabsList className="grid w-fit grid-cols-2">
+              <TabsTrigger value="editor" className="flex items-center gap-2">
+                <Code className="w-4 h-4" />
+                Code Editor
+              </TabsTrigger>
+              <TabsTrigger value="chat" className="flex items-center gap-2">
+                <Zap className="w-4 h-4" />
+                AI Assistant
+              </TabsTrigger>
+            </TabsList>
+            
+            <div className="text-sm text-muted-foreground">
+              {selectedModel.split('/').pop()}
+            </div>
+          </div>
+
+          <TabsContent value="editor" className="mt-0">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[calc(100vh-200px)]">
+              {/* Code Editor */}
+              <Card className="p-4 flex flex-col">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-lg font-semibold">Code Editor</h2>
+                  <Badge variant="outline">JavaScript</Badge>
+                </div>
+                <CodeEditor
+                  value={code}
+                  onChange={setCode}
+                  className="flex-1 min-h-0"
+                />
+              </Card>
+
+              {/* AI Assistant Chat */}
+              <Card className="p-4 flex flex-col">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-lg font-semibold">AI Assistant</h2>
+                  <div className="flex items-center gap-2">
+                    <div className={`w-2 h-2 rounded-full ${isLoading ? 'bg-yellow-500 animate-pulse' : 'bg-green-500'}`} />
+                    <span className="text-xs text-muted-foreground">
+                      {isLoading ? 'Thinking...' : 'Ready'}
+                    </span>
+                  </div>
+                </div>
+                
+                <ConversationPanel 
+                  completion={completion}
+                  isLoading={isLoading}
+                  className="flex-1 min-h-0 mb-4"
+                />
+                
+                <div className="flex gap-2">
+                  <Textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Ask AI to help with your code... (Ctrl+Enter to send)"
+                    className="flex-1 resize-none"
+                    rows={3}
+                  />
+                  <Button 
+                    onClick={handleSend} 
+                    disabled={!prompt.trim() || isLoading}
+                    size="icon"
+                    className="self-end"
+                  >
+                    <Send className="w-4 h-4" />
+                  </Button>
+                </div>
+              </Card>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="chat" className="mt-0">
+            <div className="max-w-4xl mx-auto">
+              <Card className="p-6">
+                <ConversationPanel 
+                  completion={completion}
+                  isLoading={isLoading}
+                  className="mb-6"
+                />
+                
+                <div className="flex gap-2">
+                  <Textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Chat with AI about coding, ask for help, generate code, or discuss programming concepts..."
+                    className="flex-1 resize-none"
+                    rows={3}
+                  />
+                  <Button 
+                    onClick={handleSend} 
+                    disabled={!prompt.trim() || isLoading}
+                    size="icon"
+                    className="self-end"
+                  >
+                    <Send className="w-4 h-4" />
+                  </Button>
+                </div>
+              </Card>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </main>
+    </div>
+  );
+}