app.py

#!pip install diffusers transformers accelerate safetensors torch torchvision pillow --quiet gradio

# 🚀 Gradio Chatbot Space for DarkNeuron Chat v1.1
# Author: @Madara369Uchiha | Works perfectly on Hugging Face Spaces

import gradio as gr
import torch
from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline

# 🔧 Model Setup
model_name = "DarkNeuron-AI/darkneuron-chat-v1.1"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name, torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32)
device = 0 if torch.cuda.is_available() else -1

# ⚙️ Create Chat Pipeline
chatbot = pipeline(
    "text-generation",
    model=model,
    tokenizer=tokenizer,
    device=device,
    return_full_text=False
)

# 🧠 Chat Function
def chat_fn(message, history):
    history_text = ""
    for user, bot in history:
        history_text += f"User: {user}\nBot: {bot}\n"
    prompt = f"{history_text}User: {message}\nBot:"

    response = chatbot(
        prompt,
        max_length=200,
        do_sample=True,
        temperature=0.7,
        top_p=0.9,
        num_return_sequences=1
    )[0]["generated_text"]

    return response.strip()

# 🎨 Ultra Premium DarkNeuron Chat v1.1
# Perfect Dark Theme - No Tint - Premium Look

# ... (Your chat_fn code stays here) ...

# 🎨 Perfect Dark Premium CSS - NO TINT
custom_css = """

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* Ultra Dark Background */

.gradio-container {

    background: #0d1117 !important;

    min-height: 100vh;

}



/* Hide ALL Scrollbars */

::-webkit-scrollbar { display: none !important; }

* {

    scrollbar-width: none !important;

    -ms-overflow-style: none !important;

}



/* Premium Glass Header */

.glass-header {

    background: rgba(13, 17, 23, 0.8);

    backdrop-filter: blur(30px);

    border: 1px solid rgba(139, 122, 255, 0.3);

    border-radius: 24px;

    padding: 1.5rem 2rem;

    margin-bottom: 2rem;

    box-shadow: 0 8px 40px rgba(139, 122, 255, 0.2);

}



.logo-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    margin-bottom: 0.5rem;

}



.logo-icon {

    font-size: 3rem;

    color: #8b7aff;

    filter: drop-shadow(0 0 25px rgba(139, 122, 255, 0.7));

    animation: pulse 2s ease-in-out infinite;

}



@keyframes pulse {

    0%, 100% { 

        transform: scale(1); 

        filter: drop-shadow(0 0 25px rgba(139, 122, 255, 0.7)); 

    }

    50% { 

        transform: scale(1.15); 

        filter: drop-shadow(0 0 40px rgba(139, 122, 255, 1)); 

    }

}



.logo-text {

    font-size: 2.3rem;

    font-weight: 900;

    background: linear-gradient(135deg, #8b7aff 0%, #b794f6 50%, #da92ff 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.version-tag {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.3rem;

    background: rgba(139, 122, 255, 0.2);

    border: 1px solid rgba(139, 122, 255, 0.4);

    border-radius: 30px;

    font-size: 0.9rem;

    color: #c4b5ff;

    box-shadow: 0 4px 20px rgba(139, 122, 255, 0.25);

}



/* Hero Section */

.hero-section {

    text-align: center;

    padding: 3rem 0 4rem;

}



.hero-title {

    font-size: 4.5rem;

    font-weight: 900;

    color: #ffffff;

    margin-bottom: 1.5rem;

    text-shadow: 0 0 80px rgba(139, 122, 255, 0.8);

    letter-spacing: -0.02em;

}



.hero-subtitle {

    font-size: 1.4rem;

    color: rgba(255, 255, 255, 0.75);

    max-width: 800px;

    margin: 0 auto 2rem;

    line-height: 1.8;

}



/* Feature Cards - PURE DARK, NO TINT */

.feature-glass-card {

    background: rgba(139, 122, 255, 0.25) !important;

    border: 1px solid rgba(139, 122, 255, 0.25) !important;

    border-radius: 24px !important;

    padding: 3rem 2.5rem !important;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;

    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;

    position: relative;

    overflow: hidden;

}



.feature-glass-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: transparent !important;

    pointer-events: none;

}



.feature-glass-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(139, 122, 255, 0.08), transparent);

    transition: left 0.8s ease;

}



.feature-glass-card:hover::before {

    left: 100%;

}



.feature-glass-card:hover {

    transform: translateY(-12px) scale(1.03);

    background: #1c2128 !important;

    border-color: rgba(139, 122, 255, 0.5) !important;

    box-shadow: 0 20px 60px rgba(139, 122, 255, 0.4) !important;

}



.icon-box {

    background: transparent !important;

    border: none !important;

    padding: 1.5rem !important;

    border-radius: 16px !important;

    margin-bottom: 2rem !important;

    display: inline-block;

}



.icon-wrapper {

    font-size: 4.5rem;

    display: inline-block;

    transition: all 0.6s ease;

    filter: drop-shadow(0 8px 20px rgba(139, 122, 255, 0.4));

}



.feature-glass-card:hover .icon-wrapper {

    transform: rotateY(360deg) scale(1.2);

    filter: drop-shadow(0 12px 30px rgba(139, 122, 255, 0.7));

}



.feature-title-glass {

    font-size: 1.6rem;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 1rem;

    letter-spacing: -0.01em;

}



.feature-desc-glass {

    color: rgba(255, 255, 255, 0.7);

    line-height: 1.8;

    font-size: 1rem;

}



/* Chat Container */

.chat-container-glass {

    background: #161b22;

    border: 2px solid #4ade80;

    border-radius: 24px;

    padding: 2rem;

    box-shadow: 0 0 50px rgba(74, 222, 128, 0.25);

}



/* Settings Sidebar */

.settings-sidebar {

    background: #161b22;

    border: 1px solid rgba(139, 122, 255, 0.25);

    border-radius: 20px;

    padding: 2rem;

    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);

}



.settings-header {

    font-size: 1.2rem;

    font-weight: 700;

    color: #b794f6;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid rgba(139, 122, 255, 0.2);

}



/* Sliders & Inputs */

label {

    color: rgba(255, 255, 255, 0.8) !important;

    font-weight: 600 !important;

    font-size: 0.9rem !important;

}



input[type="range"] {

    -webkit-appearance: none;

    width: 100%;

    height: 6px;

    border-radius: 5px;

    background: rgba(255, 255, 255, 0.2) !important;

    outline: none;

}



input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: linear-gradient(135deg, #8b7aff, #b794f6);

    cursor: pointer;

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);

}



input[type="number"],

textarea {

    background: #0d1117 !important;

    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    border-radius: 10px !important;

    color: white !important;

    padding: 0.7rem !important;

}



/* Chatbot */

.chatbot {

    border: none !important;

    background: transparent !important;

}



/* Input Box */

.input-glass-box input,

.input-glass-box textarea {

    background: #0d1117 !important;

    border: 1px solid rgba(139, 122, 255, 0.3) !important;

    border-radius: 14px !important;

    padding: 1rem 1.3rem !important;

    color: rgba(255, 255, 255, 0.95) !important;

    font-size: 1rem !important;

}



.input-glass-box input::placeholder,

.input-glass-box textarea::placeholder {

    color: rgba(255, 255, 255, 0.5) !important;

}



.input-glass-box input:focus,

.input-glass-box textarea:focus {

    background: #0d1117 !important;

    border-color: rgba(139, 122, 255, 0.6) !important;

    box-shadow: 0 0 25px rgba(139, 122, 255, 0.4) !important;

    outline: none !important;

}



/* Buttons */

button {

    border-radius: 14px !important;

    font-weight: 700 !important;

    padding: 0.9rem 2rem !important;

    transition: all 0.4s ease !important;

    font-size: 1rem !important;

}



.primary-btn {

    background: linear-gradient(135deg, #8b7aff 0%, #b794f6 100%) !important;

    border: none !important;

    color: white !important;

    box-shadow: 0 6px 25px rgba(139, 122, 255, 0.5);

}



.primary-btn:hover {

    transform: translateY(-4px) scale(1.05) !important;

    box-shadow: 0 15px 45px rgba(139, 122, 255, 0.7) !important;

}



.secondary-btn {

    background: #0d1117 !important;

    border: 1px solid rgba(139, 122, 255, 0.35) !important;

    color: rgba(255, 255, 255, 0.95) !important;

}



.secondary-btn:hover {

    background: #161b22 !important;

    transform: translateY(-4px) !important;

    box-shadow: 0 12px 35px rgba(139, 122, 255, 0.35) !important;

}



/* Section Headers */

.section-header-glass {

    text-align: center;

    font-size: 3rem;

    font-weight: 900;

    background: linear-gradient(135deg, #8b7aff, #b794f6, #da92ff);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin: 5rem 0 3.5rem;

    letter-spacing: -0.02em;

}



.section-header-glass::after {

    content: '';

    display: block;

    width: 120px;

    height: 5px;

    background: linear-gradient(90deg, #8b7aff, #b794f6);

    margin: 1.3rem auto 0;

    border-radius: 3px;

}



/* Footer */

.footer-glass {

    background: rgba(13, 17, 23, 0.8);

    backdrop-filter: blur(20px);

    border-top: 1px solid rgba(139, 122, 255, 0.25);

    padding: 3rem;

    margin-top: 6rem;

    text-align: center;

    color: rgba(255, 255, 255, 0.65);

}



/* Floating Animation */

@keyframes float {

    0%, 100% { transform: translateY(0px); }

    50% { transform: translateY(-20px); }

}



.floating {

    animation: float 3s ease-in-out infinite;

}



/* Responsive */

@media (max-width: 768px) {

    .hero-title { font-size: 2.5rem; }

    .hero-subtitle { font-size: 1.1rem; }

    .feature-glass-card { padding: 2rem !important; }

}

"""

# 🎯 Ultra Dark Theme
custom_theme = gr.themes.Soft(
    primary_hue="purple",
    secondary_hue="blue",
    neutral_hue="slate",
    font=gr.themes.GoogleFont("Inter"),
).set(
    body_background_fill="#0d1117",
    block_background_fill="#161b22",
    input_background_fill="#0d1117",
)

# 🚀 Build Interface
with gr.Blocks(theme=custom_theme, css=custom_css, title="DarkNeuron Chat v1.1") as demo:
    
    # 🌟 Header
    with gr.Column(elem_classes=["glass-header"]):
        gr.HTML("""

            <div class="logo-container">

                <i class="fas fa-brain logo-icon floating"></i>

                <span class="logo-text">DarkNeuron</span>

            </div>

            <div style="text-align: center;">

                <span class="version-tag">

                    <i class="fas fa-sparkles"></i>

                    v1.1 Ultra Premium

                </span>

            </div>

        """)
    
    # 🎯 Hero
    with gr.Column(elem_classes=["hero-section"]):
        gr.HTML("""

            <h1 class="hero-title">Welcome to DarkNeuron</h1>

            <p class="hero-subtitle">Experience the pinnacle of AI conversation with advanced controls, stunning ultra-dark visuals, and blazing-fast performance.</p>

        """)
    
    # 💬 Chat Interface with Settings Sidebar
    with gr.Row():
        # ⚙️ Settings Sidebar (Left)
        with gr.Column(scale=2, elem_classes=["settings-sidebar"]):
            gr.HTML('<div class="settings-header"><i class="fas fa-sliders"></i> Advanced Settings</div>')
            
            temperature = gr.Slider(
                minimum=0.1, maximum=2.0, value=0.7, step=0.1,
                label="🌡️ Temperature",
                info="Creativity level"
            )
            
            top_p = gr.Slider(
                minimum=0.1, maximum=1.0, value=0.9, step=0.05,
                label="🎯 Top P",
                info="Sampling threshold"
            )
            
            max_tokens = gr.Slider(
                minimum=50, maximum=2048, value=200, step=50,
                label="📏 Max Tokens",
                info="Response length"
            )
            
            top_k = gr.Slider(
                minimum=1, maximum=100, value=50, step=1,
                label="🔢 Top K",
                info="Vocabulary limit"
            )
            
            system_prompt = gr.Textbox(
                label="💬 System Prompt",
                placeholder="You are a helpful AI assistant...",
                lines=4,
                value="You are DarkNeuron, a helpful and intelligent AI assistant."
            )
        
        # 💬 Chat Area (Center/Right)
        with gr.Column(scale=5, elem_classes=["chat-container-glass"]):
            chatbot_ui = gr.Chatbot(
                label="",
                height=600,
                show_copy_button=True,
                show_label=False,
                avatar_images=(
                    "https://api.dicebear.com/7.x/avataaars/svg?seed=User&backgroundColor=8b7aff",
                    "https://api.dicebear.com/7.x/bottts/svg?seed=DarkNeuron&backgroundColor=b794f6"
                ),
                bubble_full_width=False,
            )
            
            with gr.Row():
                with gr.Column(scale=6, elem_classes=["input-glass-box"]):
                    chat_input = gr.Textbox(
                        placeholder="Type your message here...",
                        show_label=False,
                        container=False,
                        max_lines=1,
                    )
                submit_btn = gr.Button("🚀 Send", scale=1, elem_classes=["primary-btn"])
            
            with gr.Row():
                clear_btn = gr.Button("🗑️ Clear", scale=1, elem_classes=["secondary-btn"])
                regenerate_btn = gr.Button("🔄 Regenerate", scale=1, elem_classes=["secondary-btn"])
                export_btn = gr.Button("💾 Export", scale=1, elem_classes=["secondary-btn"])
    
    # ✨ Features - NO TINT
    gr.HTML('<h2 class="section-header-glass">Powerful Features</h2>')
    
    with gr.Row(equal_height=True):
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["feature-glass-card"]):
                gr.HTML("""

                    <div class="icon-box">

                        <div class="icon-wrapper">

                            <i class="fas fa-bolt" style="color: #fbbf24;"></i>

                        </div>

                    </div>

                    <div class="feature-title-glass">Lightning Fast</div>

                    <div class="feature-desc-glass">Real-time streaming with token-by-token generation for instant, natural conversations.</div>

                """)
        
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["feature-glass-card"]):
                gr.HTML("""

                    <div class="icon-box">

                        <div class="icon-wrapper">

                            <i class="fas fa-shield-halved" style="color: #4ade80;"></i>

                        </div>

                    </div>

                    <div class="feature-title-glass">Private & Secure</div>

                    <div class="feature-desc-glass">Enterprise-grade security with complete data isolation on Hugging Face Spaces.</div>

                """)
        
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["feature-glass-card"]):
                gr.HTML("""

                    <div class="icon-box">

                        <div class="icon-wrapper">

                            <i class="fas fa-microchip" style="color: #f87171;"></i>

                        </div>

                    </div>

                    <div class="feature-title-glass">GPU Accelerated</div>

                    <div class="feature-desc-glass">Optimized PyTorch inference with blazing-fast GPU acceleration.</div>

                """)
    
    with gr.Row(equal_height=True):
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["feature-glass-card"]):
                gr.HTML("""

                    <div class="icon-box">

                        <div class="icon-wrapper">

                            <i class="fas fa-comments" style="color: #b794f6;"></i>

                        </div>

                    </div>

                    <div class="feature-title-glass">Smart Context</div>

                    <div class="feature-desc-glass">Maintains conversation context for coherent, intelligent responses.</div>

                """)
        
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["feature-glass-card"]):
                gr.HTML("""

                    <div class="icon-box">

                        <div class="icon-wrapper">

                            <i class="fas fa-wand-magic-sparkles" style="color: #fb923c;"></i>

                        </div>

                    </div>

                    <div class="feature-title-glass">Beautiful UI</div>

                    <div class="feature-desc-glass">Ultra-dark theme with advanced animations and stunning visual effects.</div>

                """)
        
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["feature-glass-card"]):
                gr.HTML("""

                    <div class="icon-box">

                        <div class="icon-wrapper">

                            <i class="fas fa-code-branch" style="color: #60a5fa;"></i>

                        </div>

                    </div>

                    <div class="feature-title-glass">Open Source</div>

                    <div class="feature-desc-glass">Built with Transformers and Gradio - transparent and customizable.</div>

                """)
    
    # 📊 Footer
    gr.HTML("""

        <div class="footer-glass">

            <p style="font-size: 1.1rem;"><i class="fas fa-flask"></i> Built with Gradio & Transformers | Powered by DarkNeuron-AI</p>

            <p style="margin-top: 0.7rem;"><i class="fas fa-heart" style="color: #f87171;"></i> Crafted with passion by @Madara369Uchiha</p>

        </div>

    """)
    
    # ⚙️ Event Handlers
    def respond(message, chat_history, temp, top_p_val, max_tok):
        if not message.strip():
            return "", chat_history
        bot_response = chat_fn(message, chat_history)
        chat_history.append((message, bot_response))
        return "", chat_history
    
    def regenerate(chat_history):
        if not chat_history:
            return chat_history
        last_message = chat_history[-1][0]
        chat_history = chat_history[:-1]
        bot_response = chat_fn(last_message, chat_history)
        chat_history.append((last_message, bot_response))
        return chat_history
    
    # Connect events
    chat_input.submit(respond, [chat_input, chatbot_ui, temperature, top_p, max_tokens], [chat_input, chatbot_ui])
    submit_btn.click(respond, [chat_input, chatbot_ui, temperature, top_p, max_tokens], [chat_input, chatbot_ui])
    clear_btn.click(lambda: [], None, chatbot_ui)
    regenerate_btn.click(regenerate, chatbot_ui, chatbot_ui)

# 🚀 Launch
if __name__ == "__main__":
    demo.launch(share=True)