Update app.py

app.py

@@ -4,84 +4,47 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 
 # --- Configuration Constants ---
-# Define the maximum number of tokens the model should generate in a single response
-FIXED_MAX_TOKENS = 1000 # Note: This is a very high value, typical values are much lower (e.g., 512, 1024, 2048, 4096 for many models)
-
+FIXED_MAX_TOKENS = 1000
 
 # --- Initialize the InferenceClient ---
-# For custom OpenAI-compatible APIs, initialize the InferenceClient with the base URL.
-# The specific model will be specified in the API call (e.g., chat_completion).
-API_BASE_URL = "https://vulture-awake-probably.ngrok-free.app/v1/chat/completions" # Base URL for the custom API
+API_BASE_URL = "https://vulture-awake-probably.ngrok-free.app/v1/chat/completions"
 
 try:
-    # Initialize the client with the base URL of your API.
-    # If your API requires an authentication token, you might need to pass it here,
-    # e.g., client = InferenceClient(base_url=API_BASE_URL, token="YOUR_API_TOKEN")
-    # or ensure it's set as an environment variable if the client/API supports that.
     client = InferenceClient(base_url=API_BASE_URL)
     print(f"InferenceClient initialized with base_url: {API_BASE_URL}")
 except Exception as e:
     print(f"Error initializing InferenceClient with base_url '{API_BASE_URL}': {e}")
-    # Handle the error appropriately, e.g., by exiting or using a fallback
     raise RuntimeError(
         "Could not initialize InferenceClient. "
         f"Please check the API base URL ('{API_BASE_URL}') and ensure the server is accessible. "
         f"Error: {e}"
     )
 
-
 # --- Core Chatbot Logic ---
 def respond(message, history):
-    """
-    This function processes the user's message and the chat history to generate a response
-    from the language model using the custom API.
-
-    Args:
-        message (str): The latest message from the user.
-        history (list of lists): A list where each inner list contains a pair of
-                                 [user_message, ai_message].
-
-    Yields:
-        str: The generated response token by token (for streaming).
-    """
-    # Initialize the messages list
     messages = []
-
-    # Append past interactions from the history to the messages list
-    # This provides context to the language model
     for user_message, ai_message in history:
-        if user_message: # Ensure there's a user message
+        if user_message:
             messages.append({"role": "user", "content": user_message})
-        if ai_message: # Ensure there's an AI message
+        if ai_message:
             messages.append({"role": "assistant", "content": ai_message})
-
-    # Append the current user's message to the messages list
     messages.append({"role": "user", "content": message})
 
-    # Initialize an empty string to accumulate the response
     response_text = ""
-
     try:
-        # Make a streaming call to the language model's chat completions endpoint.
-        # The `model` parameter specifies which model to use at the endpoint.
         stream = client.chat_completion(
-            messages=messages,              # The conversation history and current message
-            max_tokens=FIXED_MAX_TOKENS,    # Maximum tokens for the response
-            stream=True,                    # Enable streaming for token-by-token output
+            messages=messages,
+            max_tokens=FIXED_MAX_TOKENS,
+            stream=True,
         )
-
         for chunk in stream:
-            # Check if the chunk contains content and the content is not None
-            # The exact structure of the chunk can vary based on the model/endpoint
             if chunk.choices and chunk.choices[0].delta and chunk.choices[0].delta.content is not None:
-                token = chunk.choices[0].delta.content # Extract the token from the chunk
-                response_text += token                 # Append the token to the response string
-                yield response_text                  # Yield the accumulated response so far (for streaming UI update)
-
+                token = chunk.choices[0].delta.content
+                response_text += token
+                yield response_text
     except Exception as e:
-        # If any error occurs during the API call, yield an error message
         error_message = f"An error occurred during model inference: {e}"
-        print(error_message) # Also print to console for debugging
+        print(error_message)
         yield error_message
 
 # --- Gradio Interface Definition ---
@@ -89,8 +52,8 @@ def respond(message, history):
 # URL for the header image
 header_image_path = "https://cdn-uploads.huggingface.co/production/uploads/6540a02d1389943fef4d2640/j61iZTDaK9g0UW3aWGwWi.gif"
 
-# Ko-fi widget script
-kofi_script = """
+# Ko-fi widget script (original)
+kofi_script_original = """
 <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
 <script>
   kofiWidgetOverlay.draw('sonnydesorbo', {
@@ -104,57 +67,163 @@ kofi_script = """
 
 # Ko-fi button HTML
 kofi_button_html = """
-<div style="text-align: center; padding: 20px;">
+<div style="text-align: center; padding: 10px 20px 20px 20px;">
     <a href='https://ko-fi.com/Z8Z51E5TIG' target='_blank'>
         <img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi5.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' />
     </a>
 </div>
 """
 
-# Create a Gradio Blocks layout for more control over the interface
-# theme=gr.themes.Soft() applies a soft visual theme
-# Add the kofi_script to the head of the HTML page
-with gr.Blocks(theme=gr.themes.Soft(), head=kofi_script) as demo:
-    # Display an image at the top of the chatbot interface
+# HTML, CSS, and JavaScript for Matrix Rain
+matrix_rain_html_script = """
+<canvas id="matrixCanvas"></canvas>
+<style>
+    body {
+        /* overflow: hidden; */ /* Might hide Gradio scrollbars, be careful */
+        /* Gradio manages its own background, so direct body changes might be tricky.
+           The canvas will be fixed behind everything. */
+    }
+    #matrixCanvas {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1; /* Place it behind all Gradio content */
+        display: block;
+    }
+    /* Ensure Gradio's main content area is above the canvas and has a transparent background
+       if you want the rain to be visible *through* it, or a solid dark background
+       if you want it *around* it. Gradio theming should handle the component backgrounds.
+    */
+    gradio-app > .main, gradio-app > .main > .wrap, gradio-app { /* Attempt to make Gradio app background transparent */
+        /* background: transparent !important; */ /* This can be aggressive, use with caution */
+    }
+    /* You might need to adjust specific Gradio component backgrounds if they are not dark by default with the theme */
+    .gradio-container {
+        /* background: transparent !important; */ /* Example */
+    }
+
+</style>
+<script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+        const canvas = document.getElementById('matrixCanvas');
+        if (!canvas) {
+            console.error("Matrix canvas not found");
+            return;
+        }
+        const ctx = canvas.getContext('2d');
+
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
+        const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        const nums = '0123456789';
+        const characters = katakana + latin + nums;
+
+        const fontSize = 16;
+        let columns = Math.floor(canvas.width / fontSize);
+        let drops = [];
+
+        function initializeDrops() {
+            columns = Math.floor(canvas.width / fontSize);
+            drops = [];
+            for (let x = 0; x < columns; x++) {
+                drops[x] = 1 + Math.floor(Math.random() * (canvas.height / fontSize));
+            }
+        }
+        initializeDrops();
+
+        function drawMatrix() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.04)'; // Black BG for the canvas with a little blur
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Use a color that fits the dark theme, e.g., a neon green or the theme's primary color
+            // For Gradio, you might try to pick up CSS variables if available, or hardcode.
+            ctx.fillStyle = '#0F0'; // Classic green
+            // Example: Try to use Gradio's primary color if possible (might require more complex JS)
+            // const gradioPrimaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-500') || '#0F0';
+            // ctx.fillStyle = gradioPrimaryColor;
+
+            ctx.font = fontSize + 'px monospace';
+
+            for (let i = 0; i < drops.length; i++) {
+                const text = characters.charAt(Math.floor(Math.random() * characters.length));
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++;
+            }
+        }
+
+        let matrixInterval = setInterval(drawMatrix, 45); // Adjusted speed
+
+        window.addEventListener('resize', () => {
+            const oldWidth = canvas.width;
+            const oldHeight = canvas.height;
+            
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+
+            if (canvas.width !== oldWidth || canvas.height !== oldHeight) {
+                initializeDrops();
+            }
+        });
+
+        // Optional: A slight delay for Gradio to finish rendering before starting matrix
+        // setTimeout(() => {
+        //     if (matrixInterval) clearInterval(matrixInterval);
+        //     initializeDrops();
+        //     matrixInterval = setInterval(drawMatrix, 45);
+        // }, 500);
+    });
+</script>
+"""
+
+# Combine Ko-fi script with Matrix Rain script for the 'head'
+combined_head_script = kofi_script_original + matrix_rain_html_script
+
+
+# Create a Gradio Blocks layout
+# Use a dark theme and add the combined scripts to the head
+# theme = gr.themes.Soft() # Original theme
+theme = gr.themes.Base(primary_hue=gr.themes.colors.green, neutral_hue=gr.themes.colors.slate).dark() # Example dark theme
+
+with gr.Blocks(theme=theme, head=combined_head_script) as demo:
+    # Display an image at the top
     gr.Image(
-        value=header_image_path, # Source of the image
-        label="Chatbot Header",   # Alt text or label (not shown due to show_label=False)
-        show_label=False,         # Hide the label text
-        interactive=False,        # Make the image non-interactive
-        height=150,               # Set the height of the image
-        elem_id="chatbot-logo"    # Assign an HTML ID for potential CSS styling
+        value=header_image_path,
+        label="Chatbot Header",
+        show_label=False,
+        interactive=False,
+        height=150,
+        elem_id="chatbot-logo"
     )
 
     # Create the chat interface component
     gr.ChatInterface(
-        fn=respond,               # The function to call when a message is sent
-        chatbot=gr.Chatbot(       # Configure the chatbot display area
-            height=650            # Set the height of the chat history display
+        fn=respond,
+        chatbot=gr.Chatbot(
+            height=650,
+            # elem_id="chatbot_messages_container" # You can add an ID for more specific CSS
         ),
-        # Additional parameters for ChatInterface can be added here, e.g.:
-        # title="Xortron7 Chat",
-        # description="Chat with Xortron7, your AI assistant.",
-        # examples=[["Hello!", None], ["What is Gradio?", None]],
-        # retry_btn=None, # Removes the retry button
-        # undo_btn="Delete Previous", # Customizes the undo button
-        # clear_btn="Clear Chat", # Customizes the clear button
+        # title="XORTRON AI", # You can set a title
+        # description="Engage with the digital rain." # And a description
     )
 
     # Add the Ko-fi button at the bottom
-    gr.HTML(kofi_button_html) #
+    gr.HTML(kofi_button_html)
 
 # --- Application Entry Point ---
 if __name__ == "__main__":
-    # Launch the Gradio web server
-    # show_api=False disables the API documentation page
-    # share=False prevents creating a public Gradio link (for local development)
     try:
         demo.launch(show_api=False, share=False)
     except NameError as ne:
-        # This might happen if 'client' was not defined due to an error during initialization
         print(f"Gradio demo could not be launched. 'client' might not have been initialized: {ne}")
     except RuntimeError as re:
-        # This catches the RuntimeError raised if client initialization failed explicitly
         print(f"Gradio demo could not be launched due to an error during client initialization: {re}")
     except Exception as e:
         print(f"An unexpected error occurred when trying to launch Gradio demo: {e}")