Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+from typing import List, Dict
 
 # ---------------------------
 # QUANTUM NEURAL INTERFACE
@@ -9,9 +10,7 @@ custom_css = """
 /* ═══════════════════════════════════════════ */
 /*         CORE SYSTEM ARCHITECTURE            */
 /* ═══════════════════════════════════════════ */
-
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
-
 :root {
     --primary-glow: #00fff7;
     --secondary-glow: #7b2ff7;
@@ -19,12 +18,9 @@ custom_css = """
     --neural-dark: #0a0e27;
     --glass-bg: rgba(255, 255, 255, 0.03);
 }
-
 * {
     font-family: 'Orbitron', monospace !important;
 }
-
-/* ANIMATED BACKGROUND SYSTEM */
 body, .gradio-container {
     margin: 0;
     padding: 0;
@@ -33,7 +29,6 @@ body, .gradio-container {
     position: relative;
     overflow-x: hidden;
 }
-
 .gradio-container::before {
     content: "";
     position: fixed;
@@ -49,13 +44,10 @@ body, .gradio-container {
     pointer-events: none;
     z-index: 0;
 }
-
 @keyframes backgroundPulse {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.8; transform: scale(1.1); }
 }
-
-/* PARTICLE SYSTEM */
 .gradio-container::after {
     content: "";
     position: fixed;
@@ -74,16 +66,10 @@ body, .gradio-container {
     pointer-events: none;
     z-index: 0;
 }
-
 @keyframes particleFloat {
     0% { background-position: 0% 0%; }
     100% { background-position: 100% 100%; }
 }
-
-/* ═══════════════════════════════════════════ */
-/*         NEURAL HEADER SYSTEM                */
-/* ═══════════════════════════════════════════ */
-
 #title {
     position: relative;
     font-size: 48px;
@@ -100,17 +86,14 @@ body, .gradio-container {
     letter-spacing: 4px;
     z-index: 10;
 }
-
 @keyframes gradientFlow {
     0% { background-position: 0% 50%; }
     100% { background-position: 300% 50%; }
 }
-
 @keyframes titlePulse {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.02); }
 }
-
 #title::before {
     content: "";
     position: absolute;
@@ -122,16 +105,10 @@ body, .gradio-container {
     background: linear-gradient(90deg, transparent, var(--primary-glow), transparent);
     animation: scanLine 3s linear infinite;
 }
-
 @keyframes scanLine {
     0%, 100% { opacity: 0; }
     50% { opacity: 1; }
 }
-
-/* ═══════════════════════════════════════════ */
-/*         QUANTUM CHATBOT INTERFACE           */
-/* ═══════════════════════════════════════════ */
-
 .chatbot {
     border-radius: 20px !important;
     background: var(--glass-bg) !important;
@@ -146,58 +123,10 @@ body, .gradio-container {
     animation: chatbotIntro 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
     z-index: 10;
 }
-
 @keyframes chatbotIntro {
     0% { opacity: 0; transform: translateY(30px) scale(0.95); }
     100% { opacity: 1; transform: translateY(0) scale(1); }
 }
-
-.chatbot::before {
-    content: "";
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: linear-gradient(
-        45deg,
-        transparent,
-        rgba(0, 255, 247, 0.1),
-        transparent
-    );
-    animation: scan 8s linear infinite;
-    pointer-events: none;
-}
-
-@keyframes scan {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
-}
-
-/* ═══════════════════════════════════════════ */
-/*         MESSAGE QUANTUM STATES              */
-/* ═══════════════════════════════════════════ */
-
-.message {
-    position: relative;
-    margin: 12px 0;
-    animation: messageSpawn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes messageSpawn {
-    0% { 
-        opacity: 0; 
-        transform: translateY(20px) scale(0.9);
-        filter: blur(10px);
-    }
-    100% { 
-        opacity: 1; 
-        transform: translateY(0) scale(1);
-        filter: blur(0);
-    }
-}
-
-/* USER NEURAL SIGNATURE */
 .message.user, .user {
     background: linear-gradient(135deg, rgba(0, 255, 247, 0.2), rgba(0, 200, 255, 0.1)) !important;
     border-left: 3px solid var(--primary-glow) !important;
@@ -210,31 +139,6 @@ body, .gradio-container {
     overflow: hidden;
     transition: all 0.3s ease;
 }
-
-.message.user:hover, .user:hover {
-    transform: translateX(-5px);
-    box-shadow: 
-        0 6px 25px rgba(0, 255, 247, 0.5),
-        inset 0 0 30px rgba(0, 255, 247, 0.2) !important;
-}
-
-.message.user::before, .user::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    animation: shimmer 3s infinite;
-}
-
-@keyframes shimmer {
-    0% { left: -100%; }
-    100% { left: 100%; }
-}
-
-/* BOT NEURAL RESPONSE */
 .message.bot, .bot {
     background: linear-gradient(135deg, rgba(123, 47, 247, 0.2), rgba(147, 51, 234, 0.1)) !important;
     border-left: 3px solid var(--secondary-glow) !important;
@@ -242,40 +146,11 @@ body, .gradio-container {
     padding: 15px !important;
     box-shadow: 
         0 4px 15px rgba(123, 47, 247, 0.3),
-        inset 0 0 20px rgba(123, 47, 247, 0.1) !important;
+        inset 0 0 20px rgba(123, 47, 234, 0.1) !important;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
 }
-
-.message.bot:hover, .bot:hover {
-    transform: translateX(5px);
-    box-shadow: 
-        0 6px 25px rgba(123, 47, 247, 0.5),
-        inset 0 0 30px rgba(123, 47, 247, 0.2) !important;
-}
-
-.message.bot::after, .bot::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, var(--secondary-glow), transparent);
-    opacity: 0.3;
-    animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { transform: scale(1); opacity: 0.3; }
-    50% { transform: scale(1.5); opacity: 0.1; }
-}
-
-/* ═══════════════════════════════════════════ */
-/*         INPUT NEURAL INTERFACE              */
-/* ═══════════════════════════════════════════ */
-
 textarea, input[type="text"] {
     border-radius: 15px !important;
     background: var(--glass-bg) !important;
@@ -289,7 +164,6 @@ textarea, input[type="text"] {
     transition: all 0.3s ease;
     font-size: 14px !important;
 }
-
 textarea:focus, input[type="text"]:focus {
     outline: none !important;
     border: 1px solid var(--primary-glow) !important;
@@ -298,182 +172,6 @@ textarea:focus, input[type="text"]:focus {
         inset 0 0 30px rgba(0, 255, 247, 0.1) !important;
     transform: scale(1.01);
 }
-
-/* ═══════════════════════════════════════════ */
-/*         CONTROL PANEL INTERFACE             */
-/* ═══════════════════════════════════════════ */
-
-.gr-button {
-    background: linear-gradient(135deg, rgba(0, 255, 247, 0.2), rgba(123, 47, 247, 0.2)) !important;
-    border: 1px solid var(--primary-glow) !important;
-    border-radius: 10px !important;
-    color: white !important;
-    font-weight: 700 !important;
-    padding: 12px 24px !important;
-    box-shadow: 0 4px 15px rgba(0, 255, 247, 0.3) !important;
-    transition: all 0.3s ease !important;
-    position: relative;
-    overflow: hidden;
-}
-
-.gr-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 25px rgba(0, 255, 247, 0.5) !important;
-    border-color: var(--secondary-glow) !important;
-}
-
-.gr-button:active {
-    transform: translateY(0);
-}
-
-.gr-button::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.gr-button:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-/* ═══════════════════════════════════════════ */
-/*         SLIDER QUANTUM CONTROLS             */
-/* ═══════════════════════════════════════════ */
-
-.gr-slider {
-    position: relative;
-}
-
-.gr-slider input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background: var(--glass-bg);
-    border-radius: 10px;
-    height: 8px;
-    outline: none;
-    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-.gr-slider input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    background: var(--primary-glow);
-    border-radius: 50%;
-    cursor: pointer;
-    box-shadow: 0 0 15px var(--primary-glow);
-    transition: all 0.3s ease;
-}
-
-.gr-slider input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.3);
-    box-shadow: 0 0 25px var(--primary-glow);
-}
-
-label {
-    color: var(--primary-glow) !important;
-    font-weight: 700 !important;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 12px !important;
-    text-shadow: 0 0 10px rgba(0, 255, 247, 0.5);
-}
-
-/* ���══════════════════════════════════════════ */
-/*         SIDEBAR NEURAL PANEL                */
-/* ═══════════════════════════════════════════ */
-
-.gr-sidebar {
-    background: var(--glass-bg) !important;
-    backdrop-filter: blur(20px) !important;
-    border-right: 1px solid rgba(0, 255, 247, 0.2) !important;
-    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important;
-}
-
-/* ═══════════════════════════════════════════ */
-/*         LOADING QUANTUM STATE               */
-/* ═══════════════════════════════════════════ */
-
-.loading {
-    position: relative;
-}
-
-.loading::after {
-    content: "";
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border: 3px solid transparent;
-    border-top-color: var(--primary-glow);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* ═══════════════════════════════════════════ */
-/*         SCROLLBAR CUSTOMIZATION             */
-/* ═══════════════════════════════════════════ */
-
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--neural-dark);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: linear-gradient(180deg, var(--primary-glow), var(--secondary-glow));
-    border-radius: 10px;
-    box-shadow: 0 0 10px var(--primary-glow);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(180deg, var(--secondary-glow), var(--danger-glow));
-}
-
-/* ═══════════════════════════════════════════ */
-/*         RESPONSIVE MATRIX GRID              */
-/* ═══════════════════════════════════════════ */
-
-@media (max-width: 768px) {
-    #title {
-        font-size: 32px;
-    }
-}
-
-/* ═══════════════════════════════════════════ */
-/*         SYSTEM STATUS INDICATORS            */
-/* ═══════════════════════════════════════════ */
-
-.status-indicator {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--primary-glow);
-    box-shadow: 0 0 10px var(--primary-glow);
-    animation: blink 2s ease-in-out infinite;
-}
-
-@keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.3; }
-}
 """
 
 # ---------------------------
@@ -482,12 +180,12 @@ label {
 
 def respond(
     message,
-    history: list[dict[str, str]],
+    history: List[Dict[str, str]],
     system_message,
     max_tokens,
     temperature,
     top_p,
-    hf_token: gr.OAuthToken,
+    hf_token,
 ):
     system_message = (
         "You are a highly advanced AI system. "
@@ -513,23 +211,22 @@ def respond(
         temperature=temperature,
         top_p=top_p,
     ):
-        choices = msg.choices
+        choices = getattr(msg, "choices", [])
         token = ""
 
-        if len(choices) and choices[0].delta.content:
+        if len(choices) and getattr(choices[0].delta, "content", None):
             token = choices[0].delta.content
 
         response += token
         yield response
 
-
 # ---------------------------
 # INTERFACE INITIALIZATION
 # ---------------------------
 
 with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
     gr.HTML("<div id='title'>NEURAL QUANTUM INTERFACE</div>")
-    
+
     with gr.Row():
         with gr.Column(scale=4):
             chatbot = gr.Chatbot(
@@ -538,7 +235,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
                 height=600,
                 elem_classes=["chatbot"]
             )
-            
+
             with gr.Row():
                 msg = gr.Textbox(
                     label="INPUT STREAM",
@@ -546,12 +243,12 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
                     scale=4
                 )
                 submit = gr.Button("TRANSMIT", scale=1)
-            
+
         with gr.Column(scale=1):
             gr.LoginButton()
             gr.Markdown("### SYSTEM PARAMETERS")
-            
-            system_message = gr.Textbox(
+
+            system_message_box = gr.Textbox(
                 value="Advanced AI System",
                 label="CORE DIRECTIVE"
             )
@@ -576,21 +273,21 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
                 step=0.05,
                 label="PROBABILITY THRESHOLD"
             )
-            
+
             clear = gr.Button("RESET SYSTEM")
-    
+
     # Event handlers
     msg.submit(
         respond,
-        [msg, chatbot, system_message, max_tokens, temperature, top_p],
+        [msg, chatbot, system_message_box, max_tokens, temperature, top_p],
         [chatbot]
     )
     submit.click(
         respond,
-        [msg, chatbot, system_message, max_tokens, temperature, top_p],
+        [msg, chatbot, system_message_box, max_tokens, temperature, top_p],
         [chatbot]
     )
     clear.click(lambda: None, None, chatbot, queue=False)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()