Spaces:

Chickaboo
/

gpt-4o

Running

App Files Files Community

Chickaboo commited on May 24, 2024

Commit

349a6be

verified ·

1 Parent(s): 7090ace

Update index.html

Browse files

Files changed (1) hide show

index.html +87 -87

index.html CHANGED Viewed

@@ -300,18 +300,21 @@
             margin-top: 24px;
             margin-bottom: 16px;
             color: #fff;
         }
         .message-container h2 {
             font-size: 32px;
             margin-top: 20px;
             margin-bottom: 12px;
             color: #fff;
         }
         .message-container h3 {
             font-size: 28px;
             margin-top: 16px;
             margin-bottom: 8px;
             color: #fff;
         }
         .message-container ul,
         .message-container ol {
@@ -319,18 +322,21 @@
             margin-bottom: 12px;
             padding-left: 20px;
             color: #fff;
         }
         .message-container li {
             margin-bottom: 6px;
         }
         .message-container pre {
             background-color: #333;
             padding: 16px;
             border-radius: 8px;
             margin-top: 12px;
             margin-bottom: 12px;
             overflow-x: auto;
             color: #fff;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         .message-container pre code {
@@ -338,6 +344,7 @@
             padding: 0;
             font-size: 18px;
             color: #fff;
         }
         .message-container a {
             color: #007bff;
@@ -348,105 +355,98 @@
         .message-container a:hover {
             border-bottom-color: #007bff;
         }
         .message-container em {
             font-style: italic;
         }
         .message-container strong {
             font-weight: bold;
         }
-        .initial-message {
-            font-size: 18px;
-            color: #4c51bf;
-            margin-bottom: 20px;
-        }
     </style>
 </head>
-<body>
-    <div class="container">
-        <div class="message-container">
-            <div class="initial-message">This is the real OpenAI GPT-4o</div>
-        </div>
-    </div>
-    <div class="input-container">
-        <textarea type="text" id="user-input" class="message-input" placeholder="Type your message..."></textarea>
-        <button id="send-btn" class="btn-send">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
-            </svg>
-        </button>
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
-        <script>
-            const userInput = document.getElementById('user-input');
-            const sendBtn = document.getElementById('send-btn');
-            const chatOutput = document.querySelector('.message-container');
-            let messages = [];
-            async function sendMessage() {
-                try {
-                    sendBtn.disabled = true;
-                    const response = await fetch('https://gpt4.discord.rocks/ask', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            "messages": messages,
-                            "model": "gpt-4o"
-                        })
-                    });
-                    const data = await response.json();
-                    sendBtn.disabled = false;
-                    return data.response;
-                } catch (error) {
-                    console.error('Error sending message:', error);
-                    sendBtn.disabled = false;
-                    return 'Error: Failed to send message.';
-                }
             }
-            function displayMessage(message, role) {
-                const messageElement = document.createElement('div');
-                messageElement.classList.add('message', `${role}-message`);
-                const markdownParsedMessage = parseMarkdown(message);
-                messageElement.innerHTML = markdownParsedMessage;
-                chatOutput.appendChild(messageElement);
-                chatOutput.scrollTop = chatOutput.scrollHeight;
             }
-            function parseMarkdown(message) {
-                const converter = new showdown.Converter({
-                    simplifiedAutoLink: true,
-                    strikethrough: true,
-                    tables: true,
-                    tasklists: true,
-                    literalMidWordUnderscores: true,
-                });
-                return converter.makeHtml(message);
-            }
-            sendBtn.addEventListener('click', async () => {
-                const message = userInput.value.trim();
-                if (message !== '') {
-                    messages.push({ "role": "user", "content": message });
-                    displayMessage("> " + message, 'user');
-                    document.querySelector('.initial-message').style.display = 'none';
-                    const botResponse = await sendMessage();
-                    messages.push({ "role": "assistant", "content": botResponse });
-                    displayMessage(botResponse, 'bot');
-                    userInput.value = '';
-                }
-            });
-            userInput.addEventListener('keypress', async (event) => {
-                if (event.key === 'Enter') {
-                    sendBtn.click();
-                }
-            });
-        </script>
-    </div>
-</body>
 </html>

             margin-top: 24px;
             margin-bottom: 16px;
             color: #fff;
+            /* Change text color to white */
         }
         .message-container h2 {
             font-size: 32px;
             margin-top: 20px;
             margin-bottom: 12px;
             color: #fff;
+            /* Change text color to white */
         }
         .message-container h3 {
             font-size: 28px;
             margin-top: 16px;
             margin-bottom: 8px;
             color: #fff;
+            /* Change text color to white */
         }
         .message-container ul,
         .message-container ol {
             margin-bottom: 12px;
             padding-left: 20px;
             color: #fff;
+            /* Change text color to white */
         }
         .message-container li {
             margin-bottom: 6px;
         }
         .message-container pre {
             background-color: #333;
+            /* Darken the background for better contrast */
             padding: 16px;
             border-radius: 8px;
             margin-top: 12px;
             margin-bottom: 12px;
             overflow-x: auto;
             color: #fff;
+            /* Change text color to white */
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         .message-container pre code {
             padding: 0;
             font-size: 18px;
             color: #fff;
+            /* Change text color to white */
         }
         .message-container a {
             color: #007bff;
         .message-container a:hover {
             border-bottom-color: #007bff;
         }
+        /* Support for italic and bold italic */
         .message-container em {
             font-style: italic;
         }
         .message-container strong {
             font-weight: bold;
         }
     </style>
 </head>
+<div class="container">
+    <div class="message-container"></div>
+</div>
+<div class="input-container">
+    <textarea type="text" id="user-input" class="message-input" placeholder="Type your message..."></textarea>
+    <button id="send-btn" class="btn-send">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
+        </svg>
+    </button>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
+    <script>
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        const chatOutput = document.querySelector('.message-container');
+        let messages = [];
+async function sendMessage() {
+    try {
+        sendBtn.disabled = true;
+        const response = await fetch('https://gpt4.discord.rocks/ask', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                "messages": messages,
+                "model": "gpt-4o"
+            })
+        });
+        const data = await response.json();
+        sendBtn.disabled = false;
+        return data.response;
+    } catch (error) {
+        console.error('Error sending message:', error);
+        sendBtn.disabled = false;
+        return 'Error: Failed to send message.';
+    }
+}
+        function displayMessage(message, role) {
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('message', `${role}-message`);
+            // Parse Markdown syntax
+            const markdownParsedMessage = parseMarkdown(message);
+            // Set HTML content
+            messageElement.innerHTML = markdownParsedMessage;
+            chatOutput.appendChild(messageElement);
+            chatOutput.scrollTop = chatOutput.scrollHeight;
+        }
+        function parseMarkdown(message) {
+        // Initialize Showdown converter
+        const converter = new showdown.Converter({
+            // Enable all Markdown extensions
+            simplifiedAutoLink: true,
+            strikethrough: true,
+            tables: true,
+            tasklists: true,
+            literalMidWordUnderscores: true,
+        });
+        // Convert Markdown to HTML
+        return converter.makeHtml(message);
+    }
+        sendBtn.addEventListener('click', async () => {
+            const message = userInput.value.trim();
+            if (message !== '') {
+                messages.push({ "role": "user", "content": message });
+                displayMessage("> " + message, 'user');
+                const botResponse = await sendMessage();
+                messages.push({ "role": "assistant", "content": botResponse });
+                displayMessage(botResponse, 'bot');
+                userInput.value = '';
             }
+        });
+        userInput.addEventListener('keypress', async (event) => {
+            if (event.key === 'Enter') {
+                sendBtn.click();
             }
+        });
+    </script>
+    </body>
 </html>