Update app.py

app.py

@@ -1,118 +1,114 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
-import time
 
-client = InferenceClient("lambdaindie/lambdai")
+client = InferenceClient("lambdaindie/lambda")
 
-css = """
-body {
-    background-color: #111;
-    color: #e0e0e0;
-    font-family: 'JetBrains Mono', monospace;
+css = r"""
+/* Fonte e cores gerais */
+* { font-family: 'JetBrains Mono', monospace; }
+.gradio-container { background-color: #0d0d0d; color: #e0e0e0; }
+/* Inputs e chat bubbles */
+textarea, input, .block, .wrap, .chatbot, .scroll-hide {
+    background-color: #1a1a1a !important;
+    color: #e0e0e0 !important;
+    border: 1px solid #333 !important;
+    border-radius: 12px;
 }
-.gr-button {
-    background: linear-gradient(to right, #2a2a2a, #1f1f1f);
-    color: white;
-    border-radius: 10px;
-    padding: 8px 16px;
-    font-weight: bold;
-    font-family: 'JetBrains Mono', monospace;
+/* Botão com pulse animation */
+@keyframes pulse {
+  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
+  70%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
 }
-.gr-button:hover {
-    background: #333;
+button.pulse {
+    background-color: #272727 !important;
+    border: 1px solid #444 !important;
+    color: #e0e0e0 !important;
+    border-radius: 12px;
+    animation: pulse 2s infinite;
 }
-.gr-textbox textarea {
-    background-color: #181818 !important;
-    color: #fff !important;
-    font-family: 'JetBrains Mono', monospace;
-    border-radius: 8px;
+/* Hover no botão */
+button.pulse:hover {
+    background-color: #444 !important;
 }
-.gr-chat-message {
-    font-family: 'JetBrains Mono', monospace;
+/* Spinner de thinking */
+@keyframes spin {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
-.markdown-think {
-    background-color: #1e1e1e;
-    border-left: 4px solid #555;
-    padding: 10px;
-    margin-bottom: 8px;
-    font-style: italic;
-    white-space: pre-wrap;
-    font-family: 'JetBrains Mono', monospace;
-    animation: pulse 1.5s infinite ease-in-out;
+.loader {
+  border: 3px solid #2b2b2b;
+  border-top: 3px solid #e0e0e0;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
 }
-@keyframes pulse {
-    0% { opacity: 0.6; }
-    50% { opacity: 1.0; }
-    100% { opacity: 0.6; }
+/* Markdown de thinking dentro do chat */
+.thinking-html {
+  background-color: #2b2b2b;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  font-style: italic;
+  color: #aaaaaa;
+  display: flex;
+  align-items: center;
 }
 """
 
-def respond(message, history, system_message, max_tokens, temperature, top_p):
-    messages = [{"role": "system", "content": system_message}] if system_message else []
-
-    for user, assistant in history:
-        if user:
-            messages.append({"role": "user", "content": user})
-        if assistant:
-            messages.append({"role": "assistant", "content": assistant})
-
-    thinking_prompt = messages + [
-        {
-            "role": "user",
-            "content": f"{message}\n\nThink step-by-step before answering."
-        }
-    ]
-
-    reasoning = ""
-    yield '<div class="markdown-think">Thinking...</div>'
+with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
 
-    for chunk in client.chat_completion(
-        thinking_prompt,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = chunk.choices[0].delta.content or ""
-        reasoning += token
-        styled_thought = f'<div class="markdown-think">{reasoning.strip()}</div>'
-        yield styled_thought
+    gr.Markdown("<h1 style='text-align:center;color:#e0e0e0;'>🅻 Lambdai-v1-1B Chat</h1>")
+    chatbot = gr.Chatbot(elem_id="chatbot", height=480, render_markdown=True, show_copy_button=True)
+    
+    with gr.Row():
+        system_message = gr.Textbox(value="You are a helpful AI assistant.", label="System message", lines=1)
+    with gr.Row():
+        max_tokens  = gr.Slider(128, 2048, value=512, step=1, label="Max tokens")
+        temperature = gr.Slider(0.1, 1.5,  value=0.7, step=0.1, label="Temperature")
+        top_p       = gr.Slider(0.1, 1.0,  value=0.95, step=0.05, label="Top‑p")
+    with gr.Row():
+        user_input  = gr.Textbox(show_label=False, placeholder="Type your message here...", lines=2)
+        send_button = gr.Button("Λ Think", elem_classes="pulse")
 
-    time.sleep(0.5)
+    def respond(message, chat_history, system_message, max_tokens, temperature, top_p):
+        # 1) exibe o spinner + texto de thinking
+        thinking_html = (
+            f"<div class='thinking-html'>"
+            f"<div class='loader'></div>"
+            f"Thinking… generating reasoning path…"
+            f"</div>"
+        )
+        yield chat_history + [[message, thinking_html]]
 
-    final_prompt = messages + [
-        {"role": "user", "content": message},
-        {"role": "assistant", "content": reasoning.strip()},
-        {"role": "user", "content": "Now answer based on your reasoning above."}
-    ]
+        # 2) prepara payload para API
+        messages = [{"role": "system", "content": system_message}]
+        for u, a in chat_history:
+            if u: messages.append({"role":"user",     "content":u})
+            if a: messages.append({"role":"assistant","content":a})
+        messages.append({"role": "user", "content": message})
 
-    final_answer = ""
-    for chunk in client.chat_completion(
-        final_prompt,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = chunk.choices[0].delta.content or ""
-        final_answer += token
-        yield final_answer.strip()
+        # 3) chama streaming da API
+        response = ""
+        for chunk in client.chat_completion(
+            messages,
+            max_tokens=max_tokens,
+            temperature=temperature,
+            top_p=top_p,
+            stream=True
+        ):
+            delta = chunk.choices[0].delta.content or ""
+            response += delta
+            yield chat_history + [[message, response]]
 
-demo = gr.ChatInterface(
-    fn=respond,
-    title="LENIRΛ",
-    theme=gr.themes.Base(primary_hue="gray"),
-    css=css,
-    additional_inputs=[
-        gr.Textbox(
-            value="You are a concise, logical AI that explains its reasoning clearly before answering.",
-            label="System Message"
-        ),
-        gr.Slider(64, 2048, value=512, step=1, label="Max Tokens"),
-        gr.Slider(0.1, 2.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(0.1, 1.0, value=0.95, step=0.05, label="Top-p")
-    ]
-)
+    send_button.click(
+        fn=respond,
+        inputs=[user_input, chatbot, system_message, max_tokens, temperature, top_p],
+        outputs=chatbot
+    )
 
-if __name__ == "__main__":
     demo.launch()