import gradio as gr

from huggingface_hub import InferenceClient
import time

# ======================================================
# CSS FUTURISTE IA – BLANC SHADING + NEON
# ======================================================
css = """
body {
background:
radial-gradient(circle at top, rgba(0,246,255,.15), transparent),
#07090f !important;
}

.gradio-container {
max-width: 1100px !important;
margin: auto;
}

/* CHAT FRAME */
.pro-chat {
background: rgba(12,14,25,.92);
backdrop-filter: blur(14px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,.15);
box-shadow: 0 0 50px rgba(0,246,255,.12);
}

/* MESSAGE (BLANC SHADING) */
.pro-chat .message {
background: linear-gradient(
135deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02)
) !important;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.18);
padding: 12px 16px;
color: #00f6ff !important; /* BLANC */
text-shadow: 0 0 6px rgba(255,255,255,.35);
}

/* USER */
.pro-chat .user {
border-left: 3px solid rgba(255,255,255,.6);
}

/* BOT */
.pro-chat .bot {
border-left: 3px solid rgba(0,246,255,.8);
}

/* INPUT */
.pro-input textarea {
background: rgba(8,10,20,.95) !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.25) !important;
color: #f9fafb !important;
padding: 16px !important;
font-size: 15px;
caret-color: #00f6ff;
}

/* SEND BUTTON */
.pro-send {
background: linear-gradient(135deg,#00f6ff,#a855f7) !important;
border-radius: 18px !important;
color: black !important;
font-weight: 700 !important;
box-shadow: 0 0 25px rgba(0,246,255,.6);
transition: .3s;
}

.pro-send:hover {
transform: scale(1.05);
box-shadow:
0 0 35px #00f6ff,
0 0 60px #a855f7;
}

/* TYPING DOTS */
.typing {
color: #f9fafb;
font-style: italic;
opacity: .7;
}

footer { display:none !important; }
"""

# ======================================================
# IA RESPONSE + TYPING ANIMATION
# ======================================================
def respond(
message,
history,
system_message,
max_tokens,
temperature,
top_p,
hf_token: gr.OAuthToken,
):
client = InferenceClient(
token=hf_token.token,
model="darkc0de/XortronCriminalComputingConfig"
)

messages = [{"role": "system", "content": system_message}]
for user, bot in history:
messages.append({"role": "user", "content": user})
messages.append({"role": "assistant", "content": bot})
messages.append({"role": "user", "content": message})

# 👇 Animation "IA écrit..."
typing = history + [[message, "⟡ AI is thinking…"]]
yield typing
time.sleep(0.6)

response = ""
for chunk in client.chat_completion(
messages,
max_tokens=max_tokens,
stream=True,
temperature=temperature,
top_p=top_p,
):
if chunk.choices and chunk.choices[0].delta.content:
response += chunk.choices[0].delta.content
yield history + [[message, response]]

# ======================================================
# UI FUTURISTE IA
# ======================================================
with gr.Blocks(css=css) as demo:
with gr.Sidebar():
gr.Markdown("## 🔐 HuggingFace Login")
gr.LoginButton()

system = gr.Textbox(
value="You are a futuristic artificial intelligence core.",
label="System prompt"
)
max_tokens = gr.Slider(1, 2048, 512, label="Max tokens")
temperature = gr.Slider(0.1, 4.0, 0.7, label="Temperature")
top_p = gr.Slider(0.1, 1.0, 0.95, label="Top-p")

gr.Markdown("## 🤖 FUTURISTIC AI CORE")

chat = gr.Chatbot(
elem_classes="pro-chat",
height=520
)

with gr.Row():
msg = gr.Textbox(
placeholder="Transmit your message to the AI core…",
show_label=False,
elem_classes="pro-input"
)
send = gr.Button("⚡", elem_classes="pro-send")

send.click(
respond,
inputs=[msg, chat, system, max_tokens, temperature, top_p],
outputs=chat
)

if __name__ == "__main__":
demo.launch()

README.md

@@ -1,10 +1,13 @@
 ---
-title: Quantum Chat Core
-emoji: 🔥
-colorFrom: blue
-colorTo: pink
+title: Quantum Chat Core ✨
+colorFrom: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/typing-indicator.js

@@ -0,0 +1,38 @@
+class TypingIndicator extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+                .container {
+                    display: flex;
+                    gap: 4px;
+                }
+                .dot {
+                    width: 8px;
+                    height: 8px;
+                    background-color: #38bdf8;
+                    border-radius: 50%;
+                    display: inline-block;
+                    animation: pulse 1.5s infinite ease-in-out;
+                }
+                .dot:nth-child(2) {
+                    animation-delay: 0.2s;
+                }
+                .dot:nth-child(3) {
+                    animation-delay: 0.4s;
+                }
+            </style>
+            <div class="container">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+        `;
+    }
+}
+
+customElements.define('typing-indicator', TypingIndicator);

index.html

@@ -1,19 +1,110 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quantum Chat Core</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        quantum: {
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        neon: {
+                            100: '#f0f9ff',
+                            200: '#e0f2fe',
+                            300: '#bae6fd',
+                            400: '#7dd3fc',
+                            500: '#38bdf8',
+                            600: '#0ea5e9',
+                            700: '#0284c7',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen">
+    <div class="container mx-auto px-4 py-12">
+        <div class="max-w-4xl mx-auto">
+            <!-- Header -->
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-quantum-400 mb-2">Quantum Chat Core</h1>
+                <p class="text-neon-300">Conversations with the future</p>
+            </div>
+
+            <!-- Chat Container -->
+            <div class="bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-2xl border border-gray-700 shadow-xl shadow-quantum-900/20 overflow-hidden">
+                <!-- Chat Messages -->
+                <div id="chat-messages" class="h-96 overflow-y-auto p-6 space-y-4">
+                    <div class="message bot bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500">
+                        <div class="flex items-start space-x-3">
+                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-quantum-600 flex items-center justify-center">
+                                <i data-feather="cpu" class="text-white w-4 h-4"></i>
+                            </div>
+                            <div class="text-neon-100">
+                                <p>Hello! I'm your quantum AI assistant. How can I help you today?</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Input Area -->
+                <div class="border-t border-gray-700 p-4 bg-gray-800">
+                    <div class="flex space-x-2">
+                        <input type="text" id="user-input" placeholder="Type your message..." 
+                            class="flex-1 bg-gray-900 bg-opacity-70 border border-gray-700 rounded-xl px-4 py-3 text-neon-100 focus:outline-none focus:ring-2 focus:ring-quantum-500 focus:border-transparent placeholder-gray-500">
+                        <button id="send-button" class="bg-gradient-to-r from-quantum-500 to-neon-500 text-white rounded-xl px-6 py-3 font-medium hover:opacity-90 transition-all transform hover:scale-105 shadow-lg shadow-quantum-500/30">
+                            <i data-feather="send" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Settings Panel -->
+            <div class="mt-8 bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl border border-gray-700 p-6">
+                <h2 class="text-xl font-semibold text-quantum-300 mb-4">AI Configuration</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-neon-200 mb-2">System Prompt</label>
+                        <textarea class="w-full bg-gray-900 bg-opacity-70 border border-gray-700 rounded-lg px-4 py-2 text-neon-100 focus:outline-none focus:ring-2 focus:ring-quantum-500 focus:border-transparent" rows="3">You are a futuristic artificial intelligence core.</textarea>
+                    </div>
+                    <div>
+                        <label class="block text-neon-200 mb-2">Max Tokens</label>
+                        <input type="range" min="1" max="2048" value="512" class="w-full accent-quantum-500">
+                        <div class="text-right text-neon-300">512</div>
+                    </div>
+                    <div>
+                        <label class="block text-neon-200 mb-2">Temperature</label>
+                        <input type="range" min="0.1" max="4.0" step="0.1" value="0.7" class="w-full accent-quantum-500">
+                        <div class="text-right text-neon-300">0.7</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,91 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const chatMessages = document.getElementById('chat-messages');
+    const userInput = document.getElementById('user-input');
+    const sendButton = document.getElementById('send-button');
+
+    function addMessage(role, content) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${role} ${role === 'user' ? 'bg-gray-700 rounded-xl p-4 border-l-4 border-neon-500' : 'bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500'}`;
+        
+        const messageContent = `
+            <div class="flex items-start space-x-3">
+                <div class="flex-shrink-0 w-8 h-8 rounded-full ${role === 'user' ? 'bg-neon-600' : 'bg-quantum-600'} flex items-center justify-center">
+                    <i data-feather="${role === 'user' ? 'user' : 'cpu'}" class="text-white w-4 h-4"></i>
+                </div>
+                <div class="text-neon-100">
+                    <p>${content}</p>
+                </div>
+            </div>
+        `;
+        
+        messageDiv.innerHTML = messageContent;
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        feather.replace();
+    }
+
+    function simulateTyping() {
+        const typingDiv = document.createElement('div');
+        typingDiv.className = 'message bot bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500';
+        
+        const typingContent = `
+            <div class="flex items-start space-x-3">
+                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-quantum-600 flex items-center justify-center">
+                    <i data-feather="cpu" class="text-white w-4 h-4"></i>
+                </div>
+                <div class="text-neon-100">
+                    <div class="typing-indicator">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        typingDiv.innerHTML = typingContent;
+        chatMessages.appendChild(typingDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        feather.replace();
+        return typingDiv;
+    }
+
+    function removeTypingIndicator(typingElement) {
+        if (typingElement && typingElement.parentNode) {
+            typingElement.remove();
+        }
+    }
+
+    sendButton.addEventListener('click', function() {
+        const message = userInput.value.trim();
+        if (message) {
+            addMessage('user', message);
+            userInput.value = '';
+            
+            const typingElement = simulateTyping();
+            
+            // Simulate AI response after a delay
+            setTimeout(() => {
+                removeTypingIndicator(typingElement);
+                
+                // Generate a mock response (in a real app, this would be from an API)
+                const responses = [
+                    "I've processed your quantum query and found interesting patterns in the data.",
+                    "The neural network suggests several possible interpretations of your request.",
+                    "Analyzing temporal dimensions... your input resonates with 87.3% probability.",
+                    "The quantum algorithm has converged on this response after evaluating multiple possibilities.",
+                    "Fascinating perspective! My cognitive modules are processing the implications."
+                ];
+                
+                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                addMessage('bot', randomResponse);
+            }, 1500 + Math.random() * 2000);
+        }
+    });
+
+    userInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            sendButton.click();
+        }
+    });
+});

style.css

@@ -1,28 +1,58 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.typing-indicator {
+    display: flex;
+    gap: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background-color: #38bdf8;
+    border-radius: 50%;
+    display: inline-block;
+    animation: pulse 1.5s infinite ease-in-out;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
 }
+
+.message {
+    transition: all 0.3s ease;
+}
+
+.message:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(59, 130, 246, 0.5);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(59, 130, 246, 0.7);
+}