Upload folder using huggingface_hub

app.py

@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './index.css';
+
+// --- Mock AI Service ---
+// In a real scenario, this would call an OpenAI-compatible API
+const mockAIService = async (prompt) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(`This is a simulated response to: "${prompt}".\n\nThis response demonstrates the **modern UI** and **clean layout** provided by the Docker container.`);
+    }, 1500);
+  });
+};
+
+const App = () => {
+  const [messages, setMessages] = useState([
+    { id: 1, role: 'assistant', content: 'Hello! I am your AI assistant. How can I help you today?' }
+  ]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSend = async (e) => {
+    e.preventDefault();
+    if (!input.trim()) return;
+
+    const userMessage = { id: Date.now(), role: 'user', content: input };
+    setMessages(prev => [...prev, userMessage]);
+    setInput('');
+    setIsLoading(true);
+
+    // Simulate AI typing
+    const aiResponse = await mockAIService(input);
+    setMessages(prev => [...prev, { id: Date.now() + 1, role: 'assistant', content: aiResponse }]);
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="flex h-screen w-full bg-slate-50 font-sans text-slate-800 overflow-hidden">
+      
+      {/* --- Sidebar (Desktop) --- */}
+      <aside className="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 h-full transition-all duration-300">
+        <div className="p-6 border-b border-slate-100">
+          <h1 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
+            AI Playground
+          </h1>
+        </div>
+        
+        <nav className="flex-1 overflow-y-auto p-4 space-y-2">
+          {/* Navigation Items */}
+          <a href="#" className="flex items-center gap-3 px-4 py-3 bg-blue-50 text-blue-700 rounded-xl font-medium transition-colors">
+            <span className="w-2 h-2 rounded-full bg-blue-500"></span>
+            New Chat
+          </a>
+          <a href="#" className="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl font-medium transition-colors">
+            <span className="w-2 h-2 rounded-full bg-slate-300"></span>
+            History
+          </a>
+          <a href="#" className="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl font-medium transition-colors">
+            <span className="w-2 h-2 rounded-full bg-slate-300"></span>
+            Settings
+          </a>
+        </nav>
+
+        <div className="p-4 border-t border-slate-100">
+          <div className="flex items-center gap-3 px-4 py-2 text-sm text-slate-500">
+            <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center">U</div>
+            <span>User</span>
+          </div>
+        </div>
+      </aside>
+
+      {/* --- Main Content --- */}
+      <main className="flex-1 flex flex-col h-full relative">
+        
+        {/* --- Header (Mobile/Desktop) --- */}
+        <header className="h-16 flex items-center justify-between px-4 md:px-8 border-b border-slate-200 bg-white/80 backdrop-blur-md sticky top-0 z-10">
+          <button 
+            className="md:hidden p-2 -ml-2 text-slate-600"
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg>
+          </button>
+          <div className="text-sm font-semibold text-slate-500">Model: DeepSeek-R1 (Simulated)</div>
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white text-xs font-bold">
+            AI
+          </div>
+        </header>
+
+        {/* --- Chat Area --- */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 scroll-smooth">
+          {messages.length === 0 && (
+            <div className="h-full flex flex-col items-center justify-center text-slate-400">
+              <svg className="w-16 h-16 mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
+              <p>Start a new conversation</p>
+            </div>
+          )}
+
+          {messages.map((msg) => (
+            <div 
+              key={msg.id} 
+              className={`flex gap-4 max-w-3xl mx-auto w-full ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}
+            >
+              {/* Avatar */}
+              <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white ${msg.role === 'user' ? 'bg-indigo-500' : 'bg-blue-500'}`}>
+                {msg.role === 'user' ? 'U' : 'AI'}
+              </div>
+
+              {/* Message Bubble */}
+              <div className={`flex-1 rounded-2xl px-5 py-3 shadow-sm text-sm md:text-base leading-relaxed ${
+                msg.role === 'user' 
+                  ? 'bg-indigo-600 text-white rounded-tr-sm' 
+                  : 'bg-white border border-slate-200 text-slate-800 rounded-tl-sm'
+              }`}>
+                <div className="whitespace-pre-wrap">{msg.content}</div>
+              </div>
+            </div>
+          ))}
+
+          {isLoading && (
+            <div className="flex gap-4 max-w-3xl mx-auto w-full">
+              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-xs font-bold text-white">AI</div>
+              <div className="bg-white border border-slate-200 rounded-2xl px-5 py-3 shadow-sm flex items-center gap-1">
+                <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"></span>
+                <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce delay-75"></span>
+                <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce delay-150"></span>
+              </div>
+            </div>
+          )}
+          
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* --- Input Area --- */}
+        <div className="p-4 md:p-8 bg-white border-t border-slate-200">
+          <form onSubmit={handleSend} className="max-w-3xl mx-auto relative">
+            <div className="relative flex items-center bg-slate-100 rounded-2xl border border-slate-200 focus-within:border-indigo-500 focus-within:ring-2 focus-within:ring-indigo-100 transition-all">
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Type a message..."
+                className="w-full bg-transparent border-none outline-none px-6 py-4 text-slate-700 placeholder:text-slate-400"
+                disabled={isLoading}
+              />
+              <button
+                type="submit"
+                disabled={isLoading || !input.trim()}
+                className="absolute right-2 p-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
+              </button>
+            </div>
+            <div className="text-center mt-3">
+              <p className="text-xs text-slate-400">AI can make mistakes. Consider checking important information.</p>
+            </div>
+          </form>
+        </div>
+      </main>
+
+      {/* --- Mobile Menu Overlay --- */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 bg-black/50 z-20 md:hidden" onClick={() => setIsMobileMenuOpen(false)}></div>
+      )}
+      <aside className={`fixed top-0 left-0 h-full w-64 bg-white z-30 transform transition-transform duration-300 md:hidden ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
+        <div className="p-6 border-b border-slate-100 flex justify-between items-center">
+          <h1 className="text-xl font-bold">AI Playground</h1>
+          <button onClick={() => setIsMobileMenuOpen(false)} className="text-slate-500">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+          </button>
+        </div>
+        <nav className="p-4 space-y-2">
+          <a href="#" className="block px-4 py-3 bg-blue-50 text-blue-700 rounded-xl font-medium">New Chat</a>
+          <a href="#" className="block px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl font-medium">History</a>
+          <a href="#" className="block px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl font-medium">Settings</a>
+        </nav>
+      </aside>
+    </div>
+  );
+};
+
+export default App;

requirements.txt

@@ -0,0 +1 @@
+# No additional dependencies required