Update app.py

app.py

@@ -1,15 +1,31 @@
 import gradio as gr
-from huggingface_hub import InferenceClient
+import time
+import requests
+import io
+from PIL import Image
+from huggingface_hub import InferenceClient, HfApi
 from deep_translator import GoogleTranslator
 from indic_transliteration import sanscript
 from indic_transliteration.detect import detect as detect_script
 from indic_transliteration.sanscript import transliterate
 import langdetect
 import re
+import os
+
+# Get secrets from Hugging Face Space
+HF_TOKEN = os.environ.get('HF_TOKEN')
+if not HF_TOKEN:
+    raise ValueError("Please set the HF_TOKEN secret in your HuggingFace Space")
 
 # Initialize clients
-text_client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-image_client = InferenceClient("SG161222/RealVisXL_V3.0")
+text_client = InferenceClient(
+    "HuggingFaceH4/zephyr-7b-beta",
+    token=HF_TOKEN
+)
+
+# Image generation setup
+API_URL = "https://api-inference.huggingface.co/models/SG161222/RealVisXL_V4.0"
+headers = {"Authorization": f"Bearer {HF_TOKEN}"}
 
 def detect_language_script(text: str) -> tuple[str, str]:
     """Detect language and script of the input text.
@@ -111,23 +127,16 @@ def is_image_request(message: str) -> bool:
     message_lower = message.lower()
     return any(trigger in message_lower for trigger in image_triggers)
 
-def generate_image(prompt: str) -> str:
-    """Generate an image using DALLE-4K model."""
+def generate_image(prompt):
+    """Generate image using HuggingFace inference API"""
     try:
-        response = image_client.text_to_image(
-            prompt,
-            parameters={
-                "negative_prompt": "blurry, bad quality, nsfw",
-                "num_inference_steps": 30,
-                "guidance_scale": 7.5
-            }
-        )
-        # Save the image and return the path or base64 string
-        # Note: Implementation depends on how you want to handle the image output
-        return response
+        response = requests.post(API_URL, headers=headers, json={"inputs": prompt})
+        image = Image.open(io.BytesIO(response.content))
+        return image
     except Exception as e:
         print(f"Image generation error: {e}")
         return None
+        
 def romanized_to_bengali(text: str) -> str:
     """Convert romanized Bengali text to Bengali script."""
     bengali_mappings = {
@@ -156,49 +165,167 @@ def romanized_to_bengali(text: str) -> str:
             
     return text_lower
 
-import gradio as gr
-import time
-from huggingface_hub import InferenceClient
-from deep_translator import GoogleTranslator
-from indic_transliteration import sanscript
-from indic_transliteration.detect import detect as detect_script
-from indic_transliteration.sanscript import transliterate
-import langdetect
-import re
 
-# Initialize clients
-text_client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-image_client = InferenceClient("SG161222/RealVisXL_V3.0")
 
 def create_chat_interface():
-    # Custom CSS for better styling
+    # Custom CSS for better styling with Inter font and animations
     custom_css = """
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    
+    * {
+        font-family: 'Inter', sans-serif !important;
+    }
+    
     .container {
         max-width: 850px !important;
         margin: auto;
     }
+    
     .chat-window {
         height: 600px !important;
         overflow-y: auto;
         border-radius: 15px !important;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.3s ease !important;
     }
+    
+    .chat-window:hover {
+        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15) !important;
+    }
+    
     .chat-message {
         padding: 1rem !important;
         margin: 0.5rem !important;
-        border-radius: 10px !important;
+        border-radius: 12px !important;
+        transition: all 0.2s ease !important;
+        opacity: 0;
+        animation: messageSlide 0.3s ease forwards;
+    }
+    
+    @keyframes messageSlide {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
+    
     .user-message {
-        background-color: #e3f2fd !important;
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+        color: white !important;
+        margin-left: 2rem !important;
     }
+    
     .bot-message {
-        background-color: #f5f5f5 !important;
+        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
+        margin-right: 2rem !important;
     }
-    .settings-block {
+    
+    /* Button Styles */
+    button.primary {
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+        border: none !important;
+        color: white !important;
+        padding: 0.75rem 1.5rem !important;
+        border-radius: 12px !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+        transform: translateY(0);
+        box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2) !important;
+    }
+    
+    button.primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 12px rgba(99, 102, 241, 0.3) !important;
+    }
+    
+    button.primary:active {
+        transform: translateY(0);
+    }
+    
+    button.secondary {
+        background: #f3f4f6 !important;
+        border: 2px solid #e5e7eb !important;
+        color: #4b5563 !important;
+        padding: 0.75rem 1.5rem !important;
+        border-radius: 12px !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    button.secondary:hover {
+        background: #e5e7eb !important;
+        border-color: #d1d5db !important;
+    }
+    
+    /* Input Styles */
+    .input-container {
+        position: relative;
+        margin-bottom: 1rem;
+    }
+    
+    textarea {
+        border: 2px solid #e5e7eb !important;
+        border-radius: 12px !important;
         padding: 1rem !important;
-        background-color: #ffffff !important;
-        border-radius: 10px !important;
+        transition: all 0.3s ease !important;
+        font-size: 1rem !important;
+        line-height: 1.5 !important;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    }
+    
+    textarea:focus {
+        border-color: #6366f1 !important;
+        box-shadow: 0 4px 6px rgba(99, 102, 241, 0.1) !important;
+    }
+    
+    /* Settings Panel */
+    .settings-block {
+        background: white !important;
+        border-radius: 15px !important;
+        padding: 1.5rem !important;
         margin-top: 1rem !important;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .settings-block:hover {
+        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08) !important;
+    }
+    
+    /* Slider Styles */
+    .gr-slider {
+        height: 4px !important;
+        background: #e5e7eb !important;
+        border-radius: 2px !important;
+    }
+    
+    .gr-slider .handle {
+        width: 16px !important;
+        height: 16px !important;
+        border: 2px solid #6366f1 !important;
+        background: white !important;
+        border-radius: 50% !important;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .gr-slider .handle:hover {
+        transform: scale(1.1);
+    }
+    
+    /* Loading Animation */
+    @keyframes pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+    }
+    
+    .loading {
+        animation: pulse 1.5s ease-in-out infinite;
     }
     """
 
@@ -207,9 +334,13 @@ def create_chat_interface():
         # Header
         with gr.Row():
             gr.HTML("""
-                <div style="text-align: center; margin-bottom: 1rem">
-                    <h1 style="font-size: 2.5rem; font-weight: 600; color: #1a237e">Xylaria Chat</h1>
-                    <p style="color: #666">Your AI Assistant for Multiple Languages</p>
+                <div style="text-align: center; margin-bottom: 2rem; padding: 2rem;">
+                    <h1 style="font-size: 3rem; font-weight: 700; color: #4f46e5; margin-bottom: 0.5rem;">
+                        ✨ Xylaria Chat
+                    </h1>
+                    <p style="color: #6b7280; font-size: 1.2rem; font-weight: 500;">
+                        Your Intelligent Multilingual Assistant
+                    </p>
                 </div>
             """)
 
@@ -221,21 +352,43 @@ def create_chat_interface():
                     show_label=False,
                     container=True,
                     elem_classes=["chat-window"],
-                    type='messages'  # Fixed: Added type parameter
+                    type='messages'
+                )
+                
+                image_output = gr.Image(
+                    type="pil",
+                    label="Generated Image",
+                    visible=False,
+                    elem_classes=["generated-image"]
                 )
                 
-                # Input area with buttons
                 with gr.Row():
-                    txt = gr.Textbox(
-                        show_label=False,
-                        placeholder="Type your message here...",
-                        container=False
-                    )
-                    send_btn = gr.Button("Send", variant="primary")
-                    clear_btn = gr.Button("Clear")
+                    with gr.Column(scale=8):
+                        txt = gr.Textbox(
+                            show_label=False,
+                            placeholder="Type your message here...",
+                            container=False,
+                            elem_classes=["input-textbox"]
+                        )
+                    with gr.Column(scale=1):
+                        send_btn = gr.Button(
+                            "Send",
+                            variant="primary",
+                            elem_classes=["primary"]
+                        )
+                    with gr.Column(scale=1):
+                        clear_btn = gr.Button(
+                            "Clear",
+                            variant="secondary",
+                            elem_classes=["secondary"]
+                        )
 
-        # Settings panel (collapsible)
-        with gr.Accordion("Advanced Settings", open=False):
+        # Settings panel
+        with gr.Accordion(
+            "⚙️ Advanced Settings",
+            open=False,
+            elem_classes=["settings-accordion"]
+        ):
             with gr.Row():
                 with gr.Column():
                     system_msg = gr.Textbox(
@@ -266,62 +419,11 @@ def create_chat_interface():
                         label="Top-p (nucleus sampling)"
                     )
 
-        # Function to handle sending messages
-        def user_message(message, history):
-            if message:
-                return "", history + [{"role": "user", "content": message}]
-            return "", history
+        # Rest of your existing functions (user_message, bot_response, etc.)
+        # ... (keep the same function implementations)
 
-        def bot_response(history, system_msg, max_tokens, temperature, top_p):
-            if not history:
-                return history
-            
-            # Get the last user message
-            message = history[-1]["content"]
-            
-            # Check for custom responses first
-            custom_response = check_custom_responses(message)
-            if custom_response:
-                history.append({"role": "assistant", "content": custom_response})
-                return history
-            
-            # Check for image generation request
-            if is_image_request(message):
-                try:
-                    image = generate_image(message)
-                    if image:
-                        history.append({"role": "assistant", "content": "Here's your generated image!"})
-                        return history
-                except Exception as e:
-                    history.append({"role": "assistant", "content": f"Sorry, I couldn't generate the image: {str(e)}"})
-                    return history
-            
-            # Handle regular text responses
-            try:
-                translated_msg, original_lang, was_transliterated = translate_text(message)
-                messages = [{"role": "system", "content": system_msg}]
-                messages.extend(history[:-1])
-                messages.append({"role": "user", "content": translated_msg})
-                
-                response = ""
-                for token in text_client.chat_completion(
-                    messages,
-                    max_tokens=max_tokens,
-                    temperature=temperature,
-                    top_p=top_p,
-                    stream=True,
-                ):
-                    response += token.choices[0].delta.content or ""
-                    history.append({"role": "assistant", "content": response})
-                    yield history
-                    time.sleep(0.02)
-                
-            except Exception as e:
-                history.append({"role": "assistant", "content": f"An error occurred: {str(e)}"})
-                yield history
-
-        # Event handlers
-        txt_msg = txt.submit(
+        # Update the event handlers to use the new classes
+        send_event = txt.submit(
             user_message,
             [txt, chatbot],
             [txt, chatbot],
@@ -329,7 +431,7 @@ def create_chat_interface():
         ).then(
             bot_response,
             [chatbot, system_msg, max_tokens, temperature, top_p],
-            chatbot
+            [chatbot, image_output]
         )
 
         send_btn.click(
@@ -340,10 +442,22 @@ def create_chat_interface():
         ).then(
             bot_response,
             [chatbot, system_msg, max_tokens, temperature, top_p],
-            chatbot
+            [chatbot, image_output]
         )
 
-        clear_btn.click(lambda: None, None, chatbot, queue=False)
+        clear_btn.click(
+            lambda: (None, None),
+            None,
+            [chatbot, image_output],
+            queue=False
+        )
+
+        # Update image visibility
+        send_event.then(
+            lambda img: gr.update(visible=img is not None),
+            image_output,
+            image_output
+        )
 
     return demo