Newversion1

app.py

@@ -0,0 +1,348 @@
+import gradio as gr
+import openai
+from openai import OpenAI
+import os
+from typing import List, Tuple
+
+# Initialize OpenAI with environment variable
+# Set OPENAI_API_KEY in Hugging Face secrets
+client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+
+# Global session state
+chat_history = []
+
+def respond_to_message(message: str, history: List[List[str]]) -> Tuple[str, List[List[str]]]:
+    """Handle user message and return response with updated history"""
+    if not message.strip():
+        return "", history
+    
+    # Add user message to history
+    history.append([message, ""])
+    
+    # Add to global chat history for sidebar
+    global chat_history
+    chat_history.append(message)
+    
+    try:
+        # Prepare messages for OpenAI API
+        messages = [{"role": "system", "content": "You are a helpful assistant."}]
+        
+        # Add conversation history
+        for user_msg, assistant_msg in history[:-1]:  # Exclude the current message
+            if user_msg and assistant_msg:
+                messages.append({"role": "user", "content": user_msg})
+                messages.append({"role": "assistant", "content": assistant_msg})
+        
+        # Add current user message
+        messages.append({"role": "user", "content": message})
+        
+        # Get response from OpenAI
+        response = client.chat.completions.create(
+            model="gpt-3.5-turbo",  # You can change to gpt-4 if available
+            messages=messages,
+            max_tokens=1000,
+            temperature=0.7
+        )
+        
+        assistant_response = response.choices[0].message.content
+        
+        # Update the last message in history with assistant response
+        history[-1][1] = assistant_response
+        
+        return "", history
+        
+    except Exception as e:
+        error_message = f"Error: {str(e)}"
+        history[-1][1] = error_message
+        return "", history
+
+def clear_chat() -> Tuple[str, List[List[str]]]:
+    """Clear the current chat history"""
+    global chat_history
+    chat_history = []
+    return "", []
+
+def get_chat_history() -> List[str]:
+    """Get chat history for sidebar"""
+    return chat_history
+
+# Custom CSS for ChatGPT-like styling
+custom_css = """
+.gradio-container {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: white !important;
+    min-height: 100vh;
+}
+
+.chat-layout {
+    display: flex;
+    height: 100vh;
+    max-width: 100%;
+    margin: 0 auto;
+    background: white;
+}
+
+.sidebar {
+    width: 280px;
+    background: #f7f7f8;
+    color: #374151;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #e5e7eb;
+    overflow-y: auto;
+}
+
+.sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid #e5e7eb;
+    background: white;
+}
+
+.history-list {
+    flex: 1;
+    padding: 8px;
+    background: #f7f7f8;
+    overflow-y: auto;
+}
+
+.history-item {
+    background: transparent !important;
+    color: #374151 !important;
+    border: none !important;
+    border-radius: 6px !important;
+    padding: 8px 12px !important;
+    font-size: 13px !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s !important;
+    width: 100% !important;
+    text-align: left !important;
+    margin-bottom: 4px !important;
+    box-shadow: none !important;
+    line-height: 1.4 !important;
+    word-wrap: break-word !important;
+    white-space: normal !important;
+}
+
+.history-item:hover {
+    background: #e5e7eb !important;
+}
+
+.history-item.active {
+    background: #e5e7eb !important;
+}
+
+.main-chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    min-height: 0;
+}
+
+.chat-header {
+    padding: 12px 24px;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    font-size: 16px;
+    font-weight: 600;
+    background: white;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    background: white;
+    min-height: 0;
+}
+
+.chatbot {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    height: 100% !important;
+}
+
+.chatbot .message {
+    margin: 0 !important;
+    padding: 16px 0 !important;
+    border-radius: 0 !important;
+    border-bottom: 1px solid #e5e7eb !important;
+}
+
+.chatbot .user-message {
+    background: white !important;
+    color: #374151 !important;
+    margin: 0 !important;
+    padding: 16px 24px !important;
+}
+
+.chatbot .bot-message {
+    background: #f9fafb !important;
+    color: #374151 !important;
+    margin: 0 !important;
+    padding: 16px 24px !important;
+}
+
+.chat-input-container {
+    padding: 16px 24px;
+    border-top: 1px solid #e5e7eb;
+    background: white;
+    position: sticky;
+    bottom: 0;
+}
+
+.chat-input {
+    background: white !important;
+    border: 1px solid #d1d5db !important;
+    color: #374151 !important;
+    border-radius: 8px !important;
+    padding: 12px 16px !important;
+    font-size: 16px !important;
+    resize: none !important;
+    min-height: 48px !important;
+}
+
+.chat-input:focus {
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+.send-button {
+    background: #3b82f6 !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 6px !important;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s !important;
+    height: 36px !important;
+}
+
+.send-button:hover {
+    background: #2563eb !important;
+}
+
+.clear-button {
+    background: #6b7280 !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 6px !important;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s !important;
+    height: 36px !important;
+}
+
+.clear-button:hover {
+    background: #4b5563 !important;
+}
+
+@media (max-width: 768px) {
+    .chat-layout {
+        flex-direction: column;
+    }
+    
+    .sidebar {
+        width: 100%;
+        height: auto;
+        max-height: 200px;
+    }
+    
+    .main-chat {
+        flex: 1;
+    }
+}
+"""
+
+# Create the Gradio interface
+with gr.Blocks(css=custom_css, title="ChatGPT Clone") as demo:
+    
+    with gr.Row(elem_classes="chat-layout"):
+        # Left sidebar with chat history
+        with gr.Column(elem_classes="sidebar"):
+            # Sidebar header
+            with gr.Row(elem_classes="sidebar-header"):
+                gr.Markdown("### 💬 Chat History")
+            
+            # Chat history list
+            with gr.Column(elem_classes="history-list"):
+                chat_history_display = gr.Textbox(
+                    value="",
+                    label="",
+                    elem_classes="history-item",
+                    show_label=False,
+                    interactive=False,
+                    lines=25
+                )
+        
+        # Main chat area
+        with gr.Column(elem_classes="main-chat"):
+            # Chat header
+            with gr.Row(elem_classes="chat-header"):
+                gr.Markdown("### AI Assistant")
+            
+            # Chat messages
+            chatbot = gr.Chatbot(
+                elem_classes="chatbot",
+                height=500,
+                show_label=False,
+                container=True,
+                bubble_full_width=True
+            )
+            
+            # Chat input area
+            with gr.Row(elem_classes="chat-input-container"):
+                with gr.Column(scale=4):
+                    user_input = gr.Textbox(
+                        placeholder="Type your message here...",
+                        show_label=False,
+                        lines=2,
+                        max_lines=4,
+                        elem_classes="chat-input"
+                    )
+                with gr.Column(scale=1):
+                    send_btn = gr.Button("Send", elem_classes="send-button")
+                    clear_btn = gr.Button("Clear", elem_classes="clear-button")
+    
+    # Event handlers
+    def handle_send(message, history):
+        result = respond_to_message(message, history)
+        # Update chat history display as list items
+        if chat_history:
+            history_text = ""
+            for i, msg in enumerate(chat_history):
+                history_text += f"• {msg}\n"
+        else:
+            history_text = "No chat history yet"
+        return result[0], result[1], history_text
+    
+    def handle_clear():
+        result = clear_chat()
+        return result[0], result[1], "No chat history yet"
+    
+    # Connect events
+    send_btn.click(
+        fn=handle_send,
+        inputs=[user_input, chatbot],
+        outputs=[user_input, chatbot, chat_history_display]
+    )
+    
+    user_input.submit(
+        fn=handle_send,
+        inputs=[user_input, chatbot],
+        outputs=[user_input, chatbot, chat_history_display]
+    )
+    
+    clear_btn.click(
+        fn=handle_clear,
+        outputs=[user_input, chatbot, chat_history_display]
+    )
+
+# Launch the app for Hugging Face
+demo.launch()