Create app.py

app.py

@@ -0,0 +1,207 @@
+import gradio as gr
+import requests
+import json
+import os
+from datetime import datetime
+
+# API configuration from environment variables
+API_ENDPOINT = os.getenv("API_ENDPOINT", "none")
+API_TOKEN = os.getenv("API_TOKEN")
+
+def get_ai_response(message, history):
+    messages = [{"role": "user", "content": "You are a helpful assistant"}]  
+    for user_msg, ai_msg in history:
+        messages.append({"role": "user", "content": user_msg})
+        messages.append({"role": "assistant", "content": ai_msg})
+    messages.append({"role": "user", "content": message})
+
+    payload = {
+        "model": "RekaAI/reka-flash-3",
+        "messages": messages,
+        "stream": False,
+        "max_tokens": 1024,
+        "temperature": 0.7
+    }
+
+    headers = {
+        "Authorization": f"Bearer {API_TOKEN}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(API_ENDPOINT, headers=headers, json=payload)
+        response.raise_for_status()
+        return response.json()["choices"][0]["message"]["content"]
+    except Exception as e:
+        return f"Error: {str(e)}"
+
+def chat_interface(message, history, stored_history):
+    if history is None:
+        history = []
+    
+    ai_response = get_ai_response(message, history)
+    history.append((message, ai_response))
+    
+    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    if stored_history is None:
+        stored_history = []
+    stored_history.insert(0, {  # Insert at beginning for reverse chronological order
+        "timestamp": timestamp,
+        "user": message,
+        "ai": ai_response
+    })
+    
+    return history, stored_history
+
+# Modern black and white CSS
+custom_css = """
+body {
+    background-color: #1a1a1a;
+    color: #ffffff;
+    font-family: 'Arial', sans-serif;
+}
+#chatbot {
+    height: 60vh;
+    background-color: #2d2d2d;
+    border: 1px solid #404040;
+    border-radius: 8px;
+}
+#sidebar {
+    background-color: #242424;
+    padding: 10px;
+    border-right: 1px solid #404040;
+    height: 80vh;
+    overflow-y: auto;
+}
+#history_list {
+    list-style: none;
+    padding: 0;
+}
+.history-item {
+    background-color: #333333;
+    margin: 5px 0;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.history-item:hover {
+    background-color: #404040;
+}
+input, button {
+    background-color: #333333;
+    color: #ffffff;
+    border: 1px solid #404040;
+    border-radius: 5px;
+}
+button:hover {
+    background-color: #404040;
+}
+"""
+
+with gr.Blocks(css=custom_css, title="Modern AI Chatbot") as demo:
+    with gr.Row():
+        # Sidebar for history
+        with gr.Column(scale=1, min_width=300, elem_id="sidebar"):
+            gr.Markdown("## Chat History")
+            history_display = gr.HTML(label="Previous Conversations")
+            clear_history_btn = gr.Button("Clear History")
+        
+        # Main chat area
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(elem_id="chatbot")
+            with gr.Row():
+                message = gr.Textbox(
+                    placeholder="Type your message...",
+                    show_label=False,
+                    container=False,
+                    elem_classes="input-box"
+                )
+                submit_btn = gr.Button("Send", size="sm")
+            clear_chat_btn = gr.Button("Clear Chat")
+    
+    # States
+    chat_state = gr.State([])
+    history_state = gr.State([])
+
+    def update_history_display(stored_history):
+        if not stored_history:
+            return "<p>No history yet</p>"
+        html = "<ul id='history_list'>"
+        for item in stored_history[:10]:  # Limit to last 10 conversations
+            html += f"""
+                <li class='history-item'>
+                    <small>{item['timestamp']}</small><br>
+                    <strong>You:</strong> {item['user'][:50]}...<br>
+                    <strong>AI:</strong> {item['ai'][:50]}...
+                </li>
+            """
+        html += "</ul>"
+        return html
+
+    # Event handlers
+    submit_btn.click(
+        chat_interface,
+        [message, chat_state, history_state],
+        [chatbot, history_state]
+    ).then(
+        update_history_display,
+        history_state,
+        history_display
+    ).then(
+        lambda: "",
+        None,
+        message
+    )
+
+    clear_chat_btn.click(
+        lambda: ([], None),
+        None,
+        [chatbot, chat_state]
+    )
+
+    clear_history_btn.click(
+        lambda: ([], None),
+        None,
+        [history_state, history_display]
+    )
+
+    # Initial load
+    demo.load(
+        lambda: ([], []),
+        None,
+        [chat_state, history_state]
+    ).then(
+        update_history_display,
+        history_state,
+        history_display
+    )
+
+    # Update local storage
+    demo.change(
+        None,
+        history_state,
+        None,
+        _js="""(stored_history) => {
+            localStorage.setItem('chat_history', JSON.stringify(stored_history));
+        }"""
+    ).then(
+        update_history_display,
+        history_state,
+        history_display
+    )
+
+    # Load from local storage
+    demo.load(
+        lambda: json.loads(localStorage.getItem('chat_history') or '[]'),
+        None,
+        history_state,
+        _js="""() => {
+            return localStorage.getItem('chat_history') || '[]';
+        }"""
+    ).then(
+        update_history_display,
+        history_state,
+        history_display
+    )
+
+demo.launch()