Update app.py

app.py

@@ -1,496 +1,32 @@
 import os
-import json
-import requests
 import gradio as gr
-from typing import Generator
+from openai import OpenAI
 
-# Configuration
-API_URL = "https://integrate.api.nvidia.com/v1/chat/completions"
-MODEL = "stepfun-ai/step-3.5-flash"
+if not (key := os.getenv("NVIDIA_API_KEY")):
+    raise ValueError("NVIDIA_API_KEY не найден")
 
-def get_api_key() -> str:
-    """Get API key from environment"""
-    key = os.getenv("NVIDIA_API_KEY")
-    if not key:
-        raise ValueError("NVIDIA_API_KEY environment variable not set")
-    return key
+client = OpenAI(base_url="https://integrate.api.nvidia.com/v1", api_key=key)
 
-def respond(message: str, history: list) -> Generator[str, None, None]:
-    """Generate streaming response using direct HTTP requests"""
-    
-    # Build messages from history
-    messages = []
-    for msg in history:
-        if isinstance(msg, dict):
-            messages.append({"role": msg.get("role", "user"), "content": msg.get("content", "")})
-        elif isinstance(msg, (list, tuple)) and len(msg) == 2:
-            messages.append({"role": "user", "content": msg[0]})
-            if msg[1]:
-                messages.append({"role": "assistant", "content": msg[1]})
-    
-    messages.append({"role": "user", "content": message})
-    
-    headers = {
-        "Authorization": f"Bearer {get_api_key()}",
-        "Content-Type": "application/json",
-        "Accept": "text/event-stream",
-    }
-    
-    payload = {
-        "model": MODEL,
-        "messages": messages,
-        "temperature": 0.9,
-        "max_tokens": 16096,
-        "stream": True,
-    }
+def respond(message, history):
+    # В Gradio 4.x история уже в формате OpenAI (список словарей)
+    messages = history + [{"role": "user", "content": message}]
     
     try:
-        # Use requests with stream=True for SSE
-        with requests.post(
-            API_URL,
-            headers=headers,
-            json=payload,
-            stream=True,
-            timeout=120,
-        ) as response:
-            response.raise_for_status()
-            
-            full_response = ""
-            # Parse SSE stream
-            for line in response.iter_lines(decode_unicode=True):
-                if not line:
-                    continue
-                    
-                if line.startswith("data: "):
-                    data = line[6:]
-                    if data == "[DONE]":
-                        break
-                    
-                    try:
-                        chunk = json.loads(data)
-                        if chunk.get("choices"):
-                            delta = chunk["choices"][0].get("delta", {})
-                            content = delta.get("content", "")
-                            if content:
-                                full_response += content
-                                yield full_response
-                    except json.JSONDecodeError:
-                        continue
-            
-            if not full_response:
-                yield "No response received from the model."
-                
-    except requests.exceptions.Timeout:
-        yield "⏱️ Request timed out. Please try again."
-    except requests.exceptions.HTTPError as e:
-        yield f"❌ HTTP Error {e.response.status_code}"
-    except requests.exceptions.RequestException as e:
-        yield f"❌ Connection error: {str(e)}"
-    except Exception as e:
-        yield f"❌ Unexpected error: {str(e)}"
-
-# Beautiful custom theme
-custom_theme = gr.themes.Soft(
-    primary_hue="violet",
-    secondary_hue="purple",
-    neutral_hue="slate",
-    font=gr.themes.GoogleFont("Plus Jakarta Sans"),
-    text_size="lg",
-    spacing_size="lg",
-    radius_size="lg"
-).set(
-    button_primary_background_fill="linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%)",
-    button_primary_background_fill_hover="linear-gradient(135deg, #7c3aed 0%, #9333ea 100%)",
-    button_primary_text_color="white",
-    button_secondary_background_fill="*neutral_100",
-    button_secondary_background_fill_hover="*neutral_200",
-    block_title_text_weight="700",
-    block_title_text_size="*text_lg",
-    border_color_primary="rgba(139, 92, 246, 0.3)",
-    color_accent="*primary_500",
-    shadow_drop="0 10px 40px rgba(0, 0, 0, 0.15)",
-    shadow_drop_lg="0 20px 60px rgba(0, 0, 0, 0.2)",
-    block_border_width="0px",
-    block_shadow="*shadow_drop",
-)
-
-# Modern CSS styling
-custom_css = """
-/* Main container */
-.gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
-    min-height: 100vh;
-}
-
-/* Header styling */
-.app-header {
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
-    padding: 24px 32px;
-    margin: -12px -12px 0 -12px;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-
-.app-title {
-    font-size: 2rem !important;
-    font-weight: 800 !important;
-    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin: 0 !important;
-    letter-spacing: -0.02em;
-}
-
-.app-subtitle {
-    font-size: 1rem !important;
-    color: #64748b !important;
-    margin-top: 4px !important;
-    font-weight: 500;
-}
-
-/* Chat container */
-.chat-container {
-    background: rgba(255, 255, 255, 0.98);
-    border-radius: 24px !important;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(139, 92, 246, 0.1);
-    overflow: hidden;
-    margin-top: 16px;
-}
-
-/* Chatbot styling */
-.chatbot {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-.chatbot .message-wrap {
-    padding: 8px 0;
-}
-
-/* User message styling */
-.chatbot .message.user {
-    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
-    color: white !important;
-    border-radius: 20px 20px 4px 20px !important;
-    padding: 14px 20px !important;
-    margin-left: auto;
-    max-width: 75%;
-    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
-    font-weight: 500;
-}
-
-/* Assistant message styling */
-.chatbot .message.assistant {
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
-    color: #1e293b !important;
-    border-radius: 20px 20px 20px 4px !important;
-    padding: 14px 20px !important;
-    margin-right: auto;
-    max-width: 75%;
-    border: 1px solid rgba(139, 92, 246, 0.1) !important;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-}
-
-/* Input area */
-.input-container {
-    background: white;
-    border-top: 1px solid rgba(139, 92, 246, 0.1);
-    padding: 20px 24px;
-    margin: 0 -12px -12px -12px;
-}
-
-.textbox {
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 16px !important;
-    transition: all 0.3s ease !important;
-    background: #f8fafc !important;
-}
-
-.textbox:focus-within {
-    border-color: #8b5cf6 !important;
-    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
-    background: white !important;
-}
-
-.textbox textarea {
-    font-size: 1rem !important;
-    padding: 14px 18px !important;
-}
-
-/* Buttons */
-.primary-btn {
-    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 12px 24px !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
-}
-
-.primary-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4) !important;
-}
-
-.secondary-btn {
-    background: #f1f5f9 !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 12px 24px !important;
-    font-weight: 600 !important;
-    color: #475569 !important;
-    transition: all 0.3s ease !important;
-}
-
-.secondary-btn:hover {
-    background: #e2e8f0 !important;
-}
-
-/* Animations */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.7;
-    }
-}
-
-.chatbot .message {
-    animation: fadeInUp 0.3s ease-out !important;
-}
-
-/* Typing indicator */
-.typing-indicator {
-    display: flex;
-    gap: 4px;
-    padding: 8px 12px;
-}
-
-.typing-indicator span {
-    width: 8px;
-    height: 8px;
-    background: #8b5cf6;
-    border-radius: 50%;
-    animation: pulse 1.4s infinite ease-in-out;
-}
-
-.typing-indicator span:nth-child(1) { animation-delay: 0s; }
-.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
-.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-
-/* Footer */
-.app-footer {
-    text-align: center;
-    padding: 16px;
-    margin-top: 16px;
-    opacity: 0.7;
-    transition: opacity 0.3s ease;
-}
-
-.app-footer:hover {
-    opacity: 1;
-}
-
-.app-footer a {
-    color: #8b5cf6;
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 0.875rem;
-}
-
-/* Status indicator */
-.status-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #10b981;
-    border-radius: 50%;
-    margin-right: 8px;
-    animation: pulse 2s infinite;
-}
-
-/* Mobile responsive */
-@media (max-width: 768px) {
-    .app-header {
-        padding: 16px 20px;
-    }
-    
-    .app-title {
-        font-size: 1.5rem !important;
-    }
-    
-    .chatbot .message.user,
-    .chatbot .message.assistant {
-        max-width: 85%;
-    }
-    
-    .input-container {
-        padding: 16px;
-    }
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(139, 92, 246, 0.3);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(139, 92, 246, 0.5);
-}
-
-/* Code blocks in messages */
-.chatbot .message pre {
-    background: #1e293b !important;
-    border-radius: 12px !important;
-    padding: 16px !important;
-    overflow-x: auto;
-    margin: 12px 0 !important;
-}
-
-.chatbot .message code {
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.9rem !important;
-}
-
-/* Links in messages */
-.chatbot .message a {
-    color: #8b5cf6;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-}
-
-/* Loading state */
-.loading {
-    position: relative;
-}
-
-.loading::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
-    animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
-}
-
-/* Feature badges */
-.feature-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: rgba(139, 92, 246, 0.1);
-    color: #7c3aed;
-    padding: 6px 12px;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin-right: 8px;
-}
-"""
-
-# Create the Gradio app
-with gr.Blocks() as demo:
-    # Header
-    gr.HTML("""
-        <div class="app-header">
-            <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
-                <div>
-                    <h1 class="app-title">✨ Step 3.5 Flash</h1>
-                    <p class="app-subtitle">Advanced AI Assistant powered by NVIDIA</p>
-                </div>
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <span class="feature-badge">🚀 Fast</span>
-                    <span class="feature-badge">🧠 Smart</span>
-                    <span class="feature-badge">💬 Streaming</span>
-                </div>
-            </div>
-        </div>
-    """)
-    
-    # Chat interface
-    with gr.Group(elem_classes=["chat-container"]):
-        chatbot = gr.Chatbot(
-            show_label=False,
-            container=True,
-            height=550,
-            layout="bubble",
-            render_markdown=True,
-            buttons=["copy"],
-            placeholder="<div style='text-align: center; padding: 40px; color: #94a3b8;'><div style='font-size: 3rem; margin-bottom: 16px;'>💬</div><div style='font-size: 1.1rem; font-weight: 600;'>Start a conversation</div><div style='font-size: 0.9rem; margin-top: 8px;'>Ask me anything, I'm here to help!</div></div>",
+        stream = client.chat.completions.create(
+            model="stepfun-ai/step-3.5-flash",
+            messages=messages,
+            temperature=0.9,
+            max_tokens=16096,
+            stream=True
         )
         
-        with gr.Row(elem_classes=["input-container"]):
-            msg = gr.Textbox(
-                placeholder="Type your message here...",
-                show_label=False,
-                container=True,
-                scale=9,
-                lines=1,
-                max_lines=5,
-                elem_classes=["textbox"],
-            )
-            submit_btn = gr.Button("Send", variant="primary", scale=1, elem_classes=["primary-btn"])
-            clear_btn = gr.Button("Clear", variant="secondary", scale=1, elem_classes=["secondary-btn"])
-    
-    # Footer
-    gr.HTML("""
-        <div class="app-footer">
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
-                Built with anycoder
-            </a>
-        </div>
-    """)
-    
-    # Event handlers
-    msg.submit(respond, [msg, chatbot], [chatbot], queue=True).then(
-        lambda: "", None, msg, queue=False
-    )
-    submit_btn.click(respond, [msg, chatbot], [chatbot], queue=True).then(
-        lambda: "", None, msg, queue=False
-    )
-    clear_btn.click(lambda: ([], ""), None, [chatbot, msg], queue=False)
+        response = ""
+        for chunk in stream:
+            if chunk.choices and (text := chunk.choices[0].delta.content):
+                response += text
+                yield response
+    except Exception as e:
+        yield f"Ошибка: {e}"
 
 if __name__ == "__main__":
-    demo.launch(
-        theme=custom_theme,
-        css=custom_css,
-        server_name="0.0.0.0",
-        server_port=7860,
-        footer_links=[{"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}],
-    )
+    gr.ChatInterface(respond, title="Step 3.5 Flash").launch()