Upload folder using huggingface_hub

app.py

@@ -83,112 +83,285 @@ EXAMPLE_CONVERSATIONS = [
     ["Thank you for your help!"]
 ]
 
-# Custom CSS for better styling
-CUSTOM_CSS = """
-.chat-container {
-    height: 500px;
-    overflow-y: auto;
+# Apple-style CSS
+APPLE_CSS = """
+/* Apple-style design system */
+.gradio-container {
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    min-height: 100vh;
 }
-.message {
-    padding: 10px;
-    margin: 5px;
-    border-radius: 10px;
-    max-width: 80%;
+
+/* Main container styling */
+.main-container {
+    background: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(20px) !important;
+    border-radius: 20px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    margin: 20px auto !important;
+    padding: 30px !important;
+    max-width: 1200px !important;
+}
+
+/* Header styling */
+.header-container {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 20px 0;
+}
+
+.header-container h1 {
+    font-weight: 600 !important;
+    font-size: 2.5rem !important;
+    background: linear-gradient(45deg, #007AFF, #5856D6) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    margin-bottom: 10px !important;
+}
+
+.header-container p {
+    color: #8e8e93 !important;
+    font-size: 1.1rem !important;
+    font-weight: 400 !important;
+}
+
+/* Chatbot styling */
+.chatbot-container {
+    border-radius: 16px !important;
+    overflow: hidden !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
+    border: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Message bubbles */
+.message.user {
+    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%) !important;
+    color: white !important;
+    border-radius: 18px !important;
+    margin-left: auto !important;
+    max-width: 70% !important;
+    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
+}
+
+.message.assistant {
+    background: #f2f2f7 !important;
+    color: #1c1c1e !important;
+    border-radius: 18px !important;
+    margin-right: auto !important;
+    max-width: 70% !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* Input styling */
+.input-container {
+    background: white !important;
+    border-radius: 16px !important;
+    padding: 12px 16px !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
+    border: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Button styling - Apple-like */
+.btn-primary {
+    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    font-weight: 600 !important;
+    font-size: 0.95rem !important;
+    padding: 12px 24px !important;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3) !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4) !important;
+}
+
+.btn-secondary {
+    background: #f2f2f7 !important;
+    color: #007AFF !important;
+    border: 1px solid #d1d1d6 !important;
+    border-radius: 12px !important;
+    font-weight: 600 !important;
+    font-size: 0.95rem !important;
+    padding: 12px 24px !important;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+}
+
+.btn-secondary:hover {
+    background: #e5e5ea !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Sidebar styling */
+.sidebar-container {
+    background: rgba(255, 255, 255, 0.8) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 16px !important;
+    padding: 20px !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Stats and info styling */
+.stats-container {
+    background: white !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    margin: 10px 0 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
+}
+
+/* Examples styling */
+.examples-container {
+    background: #f8f9fa !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    border: 1px solid #e9ecef !important;
+}
+
+/* Text input styling */
+input[type="text"], textarea {
+    background: white !important;
+    border: 1px solid #e5e5ea !important;
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    font-size: 1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+input[type="text"]:focus, textarea:focus {
+    outline: none !important;
+    border-color: #007AFF !important;
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
+}
+
+/* Smooth transitions */
+* {
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px !important;
+    height: 8px !important;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1 !important;
+    border-radius: 4px !important;
 }
-.user-message {
-    background-color: #e3f2fd;
-    margin-left: auto;
-    text-align: right;
+
+::-webkit-scrollbar-thumb {
+    background: #c7c7cc !important;
+    border-radius: 4px !important;
 }
-.bot-message {
-    background-color: #f3e5f5;
+
+::-webkit-scrollbar-thumb:hover {
+    background: #8e8e93 !important;
 }
 """
 
 with gr.Blocks(
-    title="AI Chatbot Assistant",
+    title="AI Assistant",
     theme=gr.themes.Soft(),
-    css=CUSTOM_CSS
+    css=APPLE_CSS,
+    elem_classes=["main-container"]
 ) as demo:
-    # Header with branding
+    # Apple-style header
     gr.HTML("""
-    <div style="text-align: center; margin-bottom: 20px;">
-        <h1>🤖 AI Chatbot Assistant</h1>
-        <p>Your friendly AI companion for engaging conversations</p>
-        <p style="font-size: 0.9em; color: #666;">
-            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+    <div class="header-container">
+        <h1>AI Assistant</h1>
+        <p>Your intelligent conversation partner</p>
+        <p style="font-size: 0.9em; color: #8e8e93; margin-top: 10px;">
+            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #007AFF; text-decoration: none;">anycoder</a>
         </p>
     </div>
     """)
     
-    # Chat interface
     with gr.Row():
-        with gr.Column(scale=4):
+        # Main chat area
+        with gr.Column(scale=3, elem_classes=["chatbot-container"]):
             chatbot = gr.Chatbot(
-                label="Conversation",
-                height=500,
+                label="",
+                height=550,
                 show_copy_button=True,
-                placeholder="Start a conversation by typing a message below...",
+                placeholder="Start a conversation...",
                 avatar_images=(
-                    None,  # User avatar (default)
-                    "https://picsum.photos/seed/ai-avatar/100/100.jpg"  # Bot avatar
+                    None,
+                    "https://picsum.photos/seed/ai-assistant/100/100.jpg"
                 ),
-                type="messages"
+                type="messages",
+                elem_id="chatbot-main"
             )
             
-            with gr.Row():
+            # Input area with Apple-style design
+            with gr.Row(elem_classes=["input-container"]):
                 msg = gr.Textbox(
-                    label="Your Message",
-                    placeholder="Type your message here and press Enter...",
+                    label="",
+                    placeholder="Type a message...",
                     lines=1,
-                    max_lines=5,
+                    max_lines=4,
                     container=False,
-                    scale=4
+                    scale=4,
+                    show_label=False
                 )
                 submit_btn = gr.Button(
                     "Send",
                     variant="primary",
                     scale=1,
-                    size="sm"
+                    size="sm",
+                    elem_classes=["btn-primary"]
                 )
             
+            # Action buttons
             with gr.Row():
                 clear_btn = gr.Button(
-                    "Clear Conversation",
+                    "Clear Chat",
                     variant="secondary",
                     scale=1,
-                    size="sm"
+                    size="sm",
+                    elem_classes=["btn-secondary"]
                 )
                 example_btn = gr.Button(
                     "Random Example",
-                    variant="secondary", 
+                    variant="secondary",
                     scale=1,
-                    size="sm"
+                    size="sm",
+                    elem_classes=["btn-secondary"]
                 )
         
-        with gr.Column(scale=1):
-            gr.Markdown("### 💡 Tips")
-            gr.Markdown("""
-            - Type your message and press Enter or click Send
-            - Use the Clear button to start fresh
-            - Try the Random Example button for conversation starters
-            - Click on messages to copy them
-            """)
+        # Sidebar with Apple-style cards
+        with gr.Column(scale=1, elem_classes=["sidebar-container"]):
+            # Quick tips
+            with gr.Group(elem_classes=["stats-container"]):
+                gr.Markdown("""
+                ### 💬 Quick Tips
+                • Press Enter to send messages
+                • Click messages to copy
+                • Use examples for inspiration
+                """)
             
-            gr.Markdown("### 📊 Stats")
-            message_count = gr.Number(
-                label="Messages",
-                value=0,
-                interactive=False
-            )
+            # Message counter
+            with gr.Group(elem_classes=["stats-container"]):
+                message_count = gr.Number(
+                    label="Messages",
+                    value=0,
+                    interactive=False,
+                    precision=0
+                )
             
-            gr.Markdown("### 🎯 Quick Actions")
-            gr.Examples(
-                examples=EXAMPLE_CONVERSATIONS,
-                inputs=msg,
-                label="Example Messages",
-                examples_per_page=5
-            )
+            # Examples in a clean container
+            with gr.Group(elem_classes=["examples-container"]):
+                gr.Markdown("### 🎯 Conversation Starters")
+                gr.Examples(
+                    examples=EXAMPLE_CONVERSATIONS,
+                    inputs=msg,
+                    label="",
+                    examples_per_page=5
+                )
     
     # Event handlers
     def update_message_count(history: List[Dict[str, str]]) -> int:
@@ -248,7 +421,7 @@ with gr.Blocks(
     
     # Welcome message on load
     demo.load(
-        lambda: [{"role": "assistant", "content": "Hello! I'm your AI chatbot assistant. How can I help you today? 😊"}],
+        lambda: [{"role": "assistant", "content": "👋 Hello! I'm your AI assistant. How can I help you today?"}],
         outputs=chatbot
     ).then(
         update_message_count,
@@ -261,5 +434,5 @@ if __name__ == "__main__":
         share=False,
         show_error=True,
         quiet=False,
-        show_tips=True
-    )
+        show_tips=False
+    )