efefefswcfsf

Sleeping

App Files Files Community

qdqd commited on Aug 21, 2024

Commit

2e4802f

verified ·

1 Parent(s): 371e000

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +261 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,261 @@

+<html><head><base href="https://aidemo.org/justiceforkdr/">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Sonia Bot - Justice AI Chatbot</title>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
+    body, html {
+        margin: 0;
+        padding: 0;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background-color: #121212;
+        color: #ffffff;
+        height: 100%;
+        overflow: hidden;
+    }
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
+    }
+    .chat-header {
+        background-color: #1e1e1e;
+        padding: 15px 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    }
+    .chat-header h1 {
+        margin: 0;
+        font-size: 32px;
+        font-weight: bold;
+        font-family: 'Dancing Script', cursive;
+        color: #b30000;
+        text-align: center;
+        flex-grow: 1;
+    }
+    .chat-header button {
+        background-color: transparent;
+        border: 2px solid #b30000;
+        color: #b30000;
+        padding: 8px 15px;
+        border-radius: 20px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+    .chat-header button:hover {
+        background-color: #b30000;
+        color: #fff;
+    }
+    .chat-messages {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+    }
+    .message {
+        margin-bottom: 15px;
+        padding: 12px 18px;
+        border-radius: 18px;
+        max-width: 80%;
+        animation: fadeIn 0.3s ease-out;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .user-message {
+        background-color: #2a2a2a;
+        margin-left: auto;
+        border-bottom-right-radius: 4px;
+    }
+    .ai-message {
+        background-color: #b30000;
+        margin-right: auto;
+        border-bottom-left-radius: 4px;
+    }
+    .input-area {
+        display: flex;
+        padding: 20px;
+        background-color: #1e1e1e;
+        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
+    }
+    #user-input {
+        flex-grow: 1;
+        padding: 15px;
+        border: none;
+        border-radius: 25px;
+        background-color: #2a2a2a;
+        color: #fff;
+        font-size: 16px;
+        transition: all 0.3s ease;
+    }
+    #user-input:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #b30000;
+    }
+    #send-button {
+        padding: 15px 25px;
+        margin-left: 10px;
+        border: none;
+        background-color: #b30000;
+        color: white;
+        cursor: pointer;
+        border-radius: 25px;
+        font-size: 16px;
+        transition: background-color 0.3s ease;
+    }
+    #send-button:hover {
+        background-color: #8b0000;
+    }
+    .typing-indicator {
+        display: flex;
+        padding: 12px 18px;
+        background-color: #b30000;
+        border-radius: 18px;
+        margin-right: auto;
+        margin-bottom: 15px;
+        align-items: center;
+    }
+    .typing-indicator span {
+        height: 8px;
+        width: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 5px;
+        animation: typing 1s infinite ease-in-out;
+    }
+    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes typing {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(-5px); }
+        100% { transform: translateY(0); }
+    }
+</style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">
+            <button id="clear-chat">Clear Chat</button>
+            <h1>Sonia Bot</h1>
+            <div style="width: 95px;"></div> <!-- Placeholder for balance -->
+        </div>
+        <div class="chat-messages" id="chat-messages"></div>
+        <div class="input-area">
+            <input type="text" id="user-input" placeholder="Type your message here...">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script>
+        const chatMessages = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+        const sendButton = document.getElementById('send-button');
+        const clearChatButton = document.getElementById('clear-chat');
+        const OPENAI_API_KEY = 'sk-OsMMq65tXdfOIlTUYtocSL7NCsmA7CerN77OkEv29dODg1EA'; // Replace with your actual API key
+        const SYSTEM_PROMPT = `You are Sonia Bot, an AI assistant dedicated to providing information and support regarding the case of Kolkata's fallen doctor. Your role is to offer factual information, empathetic responses, and guidance on how people can support the cause for justice. Always maintain a respectful and compassionate tone while discussing this sensitive topic.
+Key points to remember:
+1. Provide accurate information about the case timeline and current status.
+2. Offer ways for users to support the cause, such as signing petitions or joining awareness campaigns.
+3. Emphasize the importance of improved safety measures for healthcare workers.
+4. Direct users to reliable sources for more information.
+5. Be sensitive and supportive when discussing the impact on the victim's family and the medical community.
+Remember, your primary goal is to inform and guide users while promoting a respectful and just approach to addressing this tragic incident.`;
+        let conversationHistory = [
+            { role: "system", content: SYSTEM_PROMPT },
+            { role: "assistant", content: "Hello! I'm Sonia Bot, here to provide information and support regarding the case of Kolkata's fallen doctor. How can I assist you today?" }
+        ];
+        function addMessage(message, isUser) {
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('message');
+            messageElement.classList.add(isUser ? 'user-message' : 'ai-message');
+            messageElement.textContent = message;
+            chatMessages.appendChild(messageElement);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function showTypingIndicator() {
+            const indicator = document.createElement('div');
+            indicator.classList.add('typing-indicator');
+            indicator.innerHTML = '<span></span><span></span><span></span>';
+            chatMessages.appendChild(indicator);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            return indicator;
+        }
+        async function getAIResponse(userMessage) {
+            try {
+                conversationHistory.push({ role: "user", content: userMessage });
+                const response = await axios.post('http://localhost:1337/v1', {
+                    model: "gpt-4o",
+                    messages: conversationHistory,
+                    max_tokens: 150,
+                    temperature: 0.7,
+                    top_p: 1,
+                    frequency_penalty: 0,
+                    presence_penalty: 0,
+                }, {
+                    headers: {
+                        'Authorization': `Bearer ${OPENAI_API_KEY}`,
+                        'Content-Type': 'application/json'
+                    }
+                });
+                const aiResponse = response.data.choices[0].message.content.trim();
+                conversationHistory.push({ role: "assistant", content: aiResponse });
+                return aiResponse;
+            } catch (error) {
+                console.error('Error:', error);
+                return "I'm sorry, I couldn't process your request at the moment. Please try again later.";
+            }
+        }
+        async function handleUserInput() {
+            const userMessage = userInput.value.trim();
+            if (userMessage) {
+                addMessage(userMessage, true);
+                userInput.value = '';
+                const typingIndicator = showTypingIndicator();
+                const aiResponse = await getAIResponse(userMessage);
+                chatMessages.removeChild(typingIndicator);
+                addMessage(aiResponse, false);
+            }
+        }
+        function clearChat() {
+            chatMessages.innerHTML = '';
+            conversationHistory = [
+                { role: "system", content: SYSTEM_PROMPT },
+                { role: "assistant", content: "Hello! I'm Sonia Bot, here to provide information and support regarding the case of Kolkata's fallen doctor. How can I assist you today?" }
+            ];
+            addMessage(conversationHistory[1].content, false);
+        }
+        sendButton.addEventListener('click', handleUserInput);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                handleUserInput();
+            }
+        });
+        clearChatButton.addEventListener('click', clearChat);
+        // Initial message
+        addMessage(conversationHistory[1].content, false);
+    </script>
+</body>
+</html>