Spaces:

Futuresony
/

FuturesonyAi

Running

App Files Files Community

Futuresony commited on Dec 12, 2024

Commit

c31429d

verified ·

1 Parent(s): 4dc0d27

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +261 -79

templates/index.html CHANGED Viewed

@@ -1,109 +1,291 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Custom AI App</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script>
     <style>
-        body {
-            font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background: #f4f4f4;
         }
-        #app-container {
             max-width: 800px;
-            margin: 50px auto;
-            background: #fff;
-            padding: 20px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             border-radius: 10px;
         }
-        textarea, input, button {
-            width: 100%;
-            margin: 10px 0;
-            padding: 10px;
-            font-size: 1rem;
         }
-        #response {
-            white-space: pre-wrap;
-            margin-top: 20px;
         }
-        #editor-container {
-            margin: 20px 0;
         }
-    </style>
-</head>
-<body>
-    <div id="app-container">
-        <h1>Custom AI App</h1>
-        <label for="system_message">System Message</label>
-        <textarea id="system_message">You are a friendly Chatbot.</textarea>
-        <label for="message">Your Message</label>
-        <textarea id="message"></textarea>
-        <label for="max_tokens">Max Tokens</label>
-        <input type="number" id="max_tokens" value="512" min="1" max="2048">
-        <label for="temperature">Temperature</label>
-        <input type="number" id="temperature" step="0.1" value="0.7" min="0.1" max="4.0">
-        <label for="top_p">Top-p</label>
-        <input type="number" id="top_p" step="0.05" value="0.95" min="0.1" max="1.0">
-        <button id="submit-btn">Submit</button>
-        <div id="response"></div>
-        <h3>Code Editor</h3>
-        <div id="editor-container">
-            <div id="editor" style="height: 300px; width: 100%; border: 1px solid #ccc;"></div>
         </div>
     </div>
-    <script>
-        const submitBtn = document.getElementById("submit-btn");
-        const responseDiv = document.getElementById("response");
-        const editor = ace.edit("editor");
-        editor.setTheme("ace/theme/monokai");
-        editor.session.setMode("ace/mode/javascript");
-        submitBtn.addEventListener("click", async () => {
-            const systemMessage = document.getElementById("system_message").value;
-            const message = document.getElementById("message").value;
-            const maxTokens = document.getElementById("max_tokens").value;
-            const temperature = document.getElementById("temperature").value;
-            const topP = document.getElementById("top_p").value;
-            const history = []; // Include logic for maintaining chat history if needed.
-            try {
-                const response = await axios.post("/respond", {
-                    system_message: systemMessage,
-                    message: message,
-                    max_tokens: parseInt(maxTokens),
-                    temperature: parseFloat(temperature),
-                    top_p: parseFloat(topP),
-                    history: history,
-                });
-                const result = response.data.response;
-                responseDiv.innerHTML = `<strong>Response:</strong><br>${result.replace(
-                    /\*\*\*(.*?)\*\*\*/g,
-                    "<b><i>$1</i></b>"
-                )}`;
-                editor.setValue(result);
-            } catch (error) {
-                console.error(error);
-                responseDiv.textContent = "Error occurred while fetching the response.";
-            }
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <base href="javascript:" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enhanced Flask Chat Interface with Call Feature</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap">
     <style>
+        * {
+            box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 90vh;
+            margin: 0;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        #chat-container {
+            width: 1500%;
             max-width: 800px;
+            background-color: rgba(255, 255, 255, 0.95);
+            padding: 25px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+            display: flex;
+            flex-direction: column;
+            height: 90vh;
+            position: relative;
+            backdrop-filter: blur(10px);
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        #chatbox {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 15px;
+            font-size: 16px;
+            margin-bottom: 20px;
+            scroll-behavior: smooth;
+            height: 90vh;
+        }
+        #chatbox .message {
+            padding: 12px 16px;
+            border-radius: 15px;
+            margin-bottom: 15px;
+            word-wrap: break-word;
+            font-size: 16px;
+            max-width: 80%;
+            clear: both;
+            position: relative;
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        #chatbox .user {
+            background-color: #007bff;
+            color: white;
+            float: right;
+            border-bottom-right-radius: 5px;
+        }
+        #chatbox .ai {
+            background-color: #e9ecef;
+            color: #333;
+            float: left;
+            border-bottom-left-radius: 5px;
+        }
+        #user-input-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            flex-wrap: wrap;
+        }
+        #user-input {
+            flex: 1;
+            padding: 12px 15px;
+            border: none;
             border-radius: 10px;
+            font-size: 16px;
+            background-color: white;
+            transition: all 0.3s ease;
+            padding-right: 45px;
         }
+                #user-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px #007bff33;
         }
+        button {
+            padding: 12px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 5px;
         }
+        button:hover {
+           background-color: #0056b3;
+           transform: translateY(-2px);
+        }
+        .mic-icon, .call-icon {
+            font-size: 24px;
+            cursor: pointer;
+            color: #555;
+            transition: all 0.3s ease;
+            padding: 8px;
+            border-radius: 50%;
+        }
+        .mic-icon:hover, .call-icon:hover {
         }
+        #call-ui {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: white;
+            padding: 30px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            text-align: center;
+            z-index: 1000;
+        }
+        #call-ui p {
+            font-size: 18px;
+            margin: 15px 0;
+            color: #333;
+        }
+        #timer {
+            font-size: 24px;
+            font-weight: bold;
+            color: #007bff;
+            margin-top: 15px;
+        }
+        .bottom-icons {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            position: absolute;
+            bottom: 1px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .call-icon {
+            color: green;
+        }
+        }
+        .icons, .navigation {
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            margin-top: 5px;
+        }
+        .navigation {
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            margin-left: 10px;
+            font-size: 14px;
+            color: #666;
+        }
+        .navigation span {
+            padding: 0 5px;
+        }
+.status-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-color: green; /* Online indicator color */
+    border-radius: 50%;
+    margin-right: 5px;
+}
+@keyframes typingAnimation {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #007bff;
+    border-radius: 50%;
+    display: inline-block;
+    animation: typingAnimation 1s infinite ease-in-out;
+    margin-right: 5px;
+}
+.typing-dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.typing-dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+        #chatbox::-webkit-scrollbar {
+            width: 8px;
+        }
+        #chatbox::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+        #chatbox::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+<div id="chat-container">
+    <div class="header">
+        <h1>Chat Assistant</h1>
+        <div class="status-indicator">
+            <span class="status-dot"></span>
+            Online
+        </div>
+    </div>
+    <div id="chatbox">
+        <div id="typing-indicator" style="display: none;">
+            <div class="typing-dot"></div>
+            <div class="typing-dot"></div>
+            <div class="typing-dot"></div>
         </div>
     </div>
+    <div id="user-input-container">
+        <input type="text" id="user-input" placeholder="Type your message here..." />
+        <span class="material-icons send-icon" onclick="sendMessage()">send</span>
+    </div>
+    <div class="bottom-icons">
+        <span class="material-icons mic-icon" id="mic-icon">mic</span>
+        <span class="material-icons call-icon" id="call-icon">call</span>
+    </div>
+</div>
+     <script src="/static/script.js"></script>
 </body>
 </html>