Spaces:

Futuresony
/

FuturesonyAi

Runtime error

App Files Files Community

Futuresony commited on Dec 12, 2024

Commit

0cbb769

verified ·

1 Parent(s): aa29f84

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +77 -78

templates/index.html CHANGED Viewed

@@ -3,108 +3,107 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chatbot App</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background-color: #f4f4f9;
         }
-        .container {
             max-width: 800px;
-            width: 100%;
             padding: 20px;
-            background: white;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            margin-top: 30px;
-        }
-        .chat-box {
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 10px;
-            height: 300px;
-            overflow-y: auto;
-            margin-bottom: 15px;
-            background-color: #f9f9f9;
-        }
-        .user-message, .bot-message {
-            margin: 5px 0;
         }
-        .bot-message {
-            font-style: italic;
-            font-weight: bold;
-            color: #333;
-        }
-        .code-editor {
             width: 100%;
-            height: 200px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            font-family: monospace;
-            margin-bottom: 15px;
         }
-        button {
-            background: #007bff;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 5px;
-            cursor: pointer;
         }
-        button:hover {
-            background: #0056b3;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Chatbot Interface</h1>
-        <div class="chat-box" id="chat-box"></div>
-        <textarea id="user-input" placeholder="Type your message here..." rows="3" style="width: 100%;"></textarea>
-        <button onclick="sendMessage()">Send</button>
-        <div>
-            <h3>Code Editor</h3>
-            <textarea id="code-editor" class="code-editor"></textarea>
         </div>
     </div>
-    <script>
-        let history = [];
-        function sendMessage() {
-            const message = document.getElementById("user-input").value;
-            const chatBox = document.getElementById("chat-box");
-            if (!message.trim()) return;
-            chatBox.innerHTML += `<div class="user-message"><b>User:</b> ${message}</div>`;
-            document.getElementById("user-input").value = '';
-            fetch('/get_response', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
                     message: message,
                     history: history,
-                    system_message: "You are a friendly chatbot.",
-                    max_tokens: 512,
-                    temperature: 0.7,
-                    top_p: 0.95
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                const botMessage = data.response;
-                chatBox.innerHTML += `<div class="bot-message"><b>Bot:</b> ${botMessage}</div>`;
-                document.getElementById("code-editor").value += botMessage + "\n";
-                history.push([message, botMessage]);
-                chatBox.scrollTop = chatBox.scrollHeight;
-            });
-        }
     </script>
 </body>
 </html>

 <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>