Spaces:

redfernstech
/

ghj

Running

App Files Files Community

Srinivasulu kethanaboina commited on Sep 18, 2024

Commit

9ae3772

verified ·

1 Parent(s): d0e5d9e

Update index.html

Browse files

Files changed (1) hide show

index.html +36 -90

index.html CHANGED Viewed

@@ -3,111 +3,57 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fetch and Display Chat History</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            margin: 20px;
         }
-        label {
-            font-weight: bold;
-            display: block;
-            margin-bottom: 5px;
-        }
-        input, button {
-            padding: 10px;
-            margin-bottom: 10px;
-            font-size: 16px;
-        }
-        button {
-            cursor: pointer;
-        }
-        #chat-history {
-            border: 1px solid #ddd;
             padding: 20px;
-            max-height: 300px;
-            overflow-y: auto;
-            background-color: #f9f9f9;
-        }
-        .chat-entry {
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #ddd;
         }
-        .chat-entry .timestamp {
-            font-size: 0.9em;
-            color: #666;
         }
-        .chat-entry .user-query {
-            font-weight: bold;
-        }
-        .chat-entry .bot-response {
-            margin-top: 5px;
-            color: #007BFF;
         }
     </style>
 </head>
 <body>
-    <h1>Chat History Viewer</h1>
-    <label for="url-input">Enter the URL of the chat history:</label>
-    <input type="text" id="url-input" placeholder="https://srinukethanaboina-srunu.hf.space" />
-    <button onclick="fetchChatHistory()">Fetch Chat History</button>
-    <h2>Chat History:</h2>
-    <div id="chat-history">
-        <!-- Chat history will be displayed here -->
     </div>
     <script>
-        async function fetchChatHistory() {
-            const url = document.getElementById('url-input').value;
-            const chatHistoryDiv = document.getElementById('chat-history');
-            chatHistoryDiv.innerHTML = ''; // Clear previous history
-            if (!url) {
-                alert('Please enter a URL');
-                return;
-            }
-            try {
-                const response = await fetch(url);
-                if (!response.ok) {
-                    throw new Error('Failed to fetch chat history.');
-                }
-                const chatHistory = await response.json();
-                // Display chat history
-                chatHistory.forEach(entry => {
-                    const chatEntryDiv = document.createElement('div');
-                    chatEntryDiv.classList.add('chat-entry');
-                    const timestampDiv = document.createElement('div');
-                    timestampDiv.classList.add('timestamp');
-                    timestampDiv.textContent = `Timestamp: ${entry.timestamp}`;
-                    const userQueryDiv = document.createElement('div');
-                    userQueryDiv.classList.add('user-query');
-                    userQueryDiv.textContent = `User asked: ${entry.query}`;
-                    const botResponseDiv = document.createElement('div');
-                    botResponseDiv.classList.add('bot-response');
-                    botResponseDiv.textContent = `Bot answered: ${entry.response}`;
-                    chatEntryDiv.appendChild(timestampDiv);
-                    chatEntryDiv.appendChild(userQueryDiv);
-                    chatEntryDiv.appendChild(botResponseDiv);
-                    chatHistoryDiv.appendChild(chatEntryDiv);
-                });
-            } catch (error) {
-                alert('Error fetching chat history: ' + error.message);
-            }
         }
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gradio Chatbot</title>
     <style>
         body {
             font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
         }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
             padding: 20px;
         }
+        iframe {
+            width: 80%;
+            height: 600px;
+            border: none;
+            margin-bottom: 20px;
         }
+        .session-data {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            width: 80%;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <!-- Embed the Gradio Chatbot -->
+        <iframe src="https://srinukethanaboina-srunu.hf.space" title="Gradio Chatbot"></iframe>
+        <!-- Display Session Data -->
+        <div class="session-data" id="session-data">
+            <h2>Session Data:</h2>
+            <pre id="session-info">Loading session data...</pre>
+        </div>
     </div>
     <script>
+        // Example JavaScript to handle session data
+        function getSessionData() {
+            // This is a placeholder; you would replace this with actual session data retrieval logic
+            // If you have cookies or localStorage, you might want to read from them
+            const sessionInfo = localStorage.getItem('chat_session_data') || 'No session data available';
+            document.getElementById('session-info').textContent = sessionInfo;
         }
+        // Call the function to display session data
+        getSessionData();
+    </script>
 </body>
 </html>