Spaces:

Chickaboo
/

gpt-4o

Running

File size: 17,759 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT-4 Chat Interface</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            overflow-y: auto;
            scroll-behavior: smooth;
        }

        .message-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: flex-start;
        }

        .message {
            max-width: 80%;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            line-height: 1.6;
            word-wrap: break-word;
            margin-top: 10px;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            position: relative;
            overflow: hidden;
            background: #fff;
            transition: all 0.3s ease-in-out;
        }

        .message::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, #4c51bf, #5a67d8);
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s ease-in-out;
        }

        .message:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        .message:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        }

        .user-message {
            background-color: #f0f0f0;
            color: #333;
        }

        .bot-message {
            background-color: #4c51bf;
            color: #fff;
        }

        @media (max-width: 768px) {
            .message {
                max-width: 90%;
                padding: 12px;
                border-radius: 12px;
            }
        }

        .input-container {
            position: fixed;
            bottom: 40px;
            left: 40px;
            right: 40px;
            background: linear-gradient(135deg, #f8f8f8 0%, #e4e4e4 100%);
            border-radius: 40px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 60px 120px rgba(0, 0, 0, 0.3);
            transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 1000;
            backdrop-filter: blur(12px);
            border: 2px solid rgba(255, 255, 255, 0.8);
            overflow: hidden;
            opacity: 0.8;
            filter: blur(1px);
            -webkit-filter: blur(1px);
        }

        .input-container:hover {
            box-shadow: 0 100px 200px rgba(0, 0, 0, 0.5);
            transform: translateY(-10px) scale(1.01);
            opacity: 1;
            filter: blur(0px);
            -webkit-filter: blur(0px);
        }

        .input-container>textarea {
            flex: 1;
            border: none;
            border-radius: 20px;
            padding: 15px;
            font-size: 18px;
            font-weight: 700;
            color: #333;
            background-color: transparent;
            transition: all 0.7s ease;
            outline: none;
            box-shadow: none;
            resize: none;

        }

        .input-container>textarea:focus {
            box-shadow: 0 0 0 4px rgba(0, 168, 255, 0.3);
        }

        .input-container>textarea::placeholder {
            color: #666;
            opacity: 1;
            font-weight: 500;
        }

        .input-container::before {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            bottom: -2px;
            left: -2px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
            border-radius: inherit;
            z-index: -1;
            transition: opacity 0.8s ease, transform 0.8s ease;
            pointer-events: none;
        }

        .input-container:hover::before {
            opacity: 0;
            transform: scale(1.05);
        }

        @keyframes pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.5);
            }

            50% {
                box-shadow: 0 0 0 6px rgba(0, 168, 255, 0);
            }
        }

        .input-container:focus-within {
            animation: pulse 2s infinite ease-in-out;
        }

        .input-container>textarea::-webkit-scrollbar {
            width: 8px;
        }

        .input-container>textarea::-webkit-scrollbar-track {
            background: #f0f0f0;
        }

        .input-container>textarea::-webkit-scrollbar-thumb {
            background: #bbb;
            border-radius: 8px;
            border: 2px solid #f0f0f0;
        }

        .input-container>textarea::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

        .input-container>textarea::-webkit-scrollbar-corner {
            background: transparent;
        }

        .message-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 16px;
            padding: 10px;
        }

        .btn-send {
            background-color: #4c51bf;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 10px 10px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-send[disabled] {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .btn-send:hover {
            background-color: #3730a3;
        }

        /* Base styles */
        :root {
            --primary-color: #ffffff;
            --hover-color: #2980b9;
            --dropdown-bg: #ffffff;
            --text-color: #2c3e50;
            --hover-bg-color: #ecf0f1;
            --border-radius: 16px;
            --padding: 16px 32px;
            --transition-duration: 0.4s;
            --arrow-size: 16px;
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Resetting default styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: var(--font-family);
        }

        /* Styling the dropdown button with shadow */
        .dropbtn {
            background-color: var(--primary-color);
            color: #2c3e50;
            padding: var(--padding);
            font-size: 18px;
            border: none;
            cursor: pointer;
            border-radius: var(--border-radius);
            outline: none;
            position: relative;
            transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
            padding-right: 50px;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        }

        .dropbtn::after {
            content: '▲';
            font-size: var(--arrow-size);
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            transition: transform var(--transition-duration), content var(--transition-duration);
        }

        .dropbtn.active::after {
            content: '▼';
            transform: translateY(-50%);
        }

        .dropbtn:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--dropdown-bg);
            min-width: 200px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            z-index: 1;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: all var(--transition-duration);
        }

        .dropdown-content a {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            text-decoration: none;
            color: var(--text-color);
            transition: background-color var(--transition-duration);
        }

        .dropdown-content a .icon {
            margin-right: 8px;
            width: 24px;
            height: 24px;
        }

        .dropdown-content a:hover {
            background-color: var(--hover-bg-color);
        }

        .dropdown-content a:hover {
            background-color: var(--hover-bg-color);
        }

        .dropbtn:focus {
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
        }

        .dropbtn:focus:not(.active)::after {
            content: '▲';
        }

        .dropbtn.active:focus::after {
            content: '▼';
        }


        /* Markdown styles */
        .message-container h1 {
            font-size: 36px;
            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 p {
            font-size: 20px;
            line-height: 1.6;
            margin-bottom: 12px;
            color: #fff;
            /* Change text color to white */
        }

        .message-container ul,
        .message-container ol {
            margin-top: 12px;
            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 {
            display: block;
            padding: 0;
            font-size: 18px;
            color: #fff;
            /* Change text color to white */
        }

        .message-container a {
            color: #007bff;
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-bottom-color 0.3s;
        }

        .message-container a:hover {
            border-bottom-color: #007bff;
        }

        /* Additional enhancements */
        .message-container blockquote {
            margin: 0;
            padding: 16px;
            background-color: #444;
            /* Darken the background for better contrast */
            border-left: 4px solid #007bff;
            border-radius: 8px;
            margin-top: 12px;
            margin-bottom: 12px;
        }

        .message-container blockquote p {
            margin: 0;
            font-style: italic;
            color: #fff;
            /* Change text color to white */
        }

        /* 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.getElementById('chat-output');
        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 })
                });
                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.';
            }
        }

// Import Prism.js for syntax highlighting
// Include Prism.js script in your HTML file

function displayMessage(message, role) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', `${role}-message`);

    // Regular expressions to detect code blocks and common code structures
    const codeBlockRegex = /```([a-zA-Z]+)?\s*([\s\S]+?)\s*```/g;
    const inlineCodeRegex = /`([^`]+?)`/g;
    const htmlTagRegex = /<[^>]+>/g;
    const jsCodeRegex = /\b(function|if|else|for|while|do|switch|case|break|continue|return|try|catch|finally|throw)\b/g;
    const jsCommentRegex = /\/\/.*|\/\*[\s\S]*?\*\//g;
    const cssCodeRegex = /[^{};]+\s*{\s*[^{}]*}/g;
    const cssCommentRegex = /\/\*[\s\S]*?\*\//g;

    // Function to create a code block element with syntax highlighting
    function createCodeBlock(language, code) {
        const codeBlock = document.createElement('code');
        if (language) {
            codeBlock.classList.add(`language-${language}`);
        }
        codeBlock.textContent = code;

        // Use Prism.js to highlight syntax
        Prism.highlightElement(codeBlock);

        const preElement = document.createElement('pre');
        preElement.appendChild(codeBlock);

        return preElement;
    }

    // Function to process code matches and add to message element
    function processCodeMatches(matches, language) {
        if (matches) {
            matches.forEach(match => {
                const codeBlock = createCodeBlock(language, match);
                messageElement.appendChild(codeBlock);
            });
        }
    }

    // Process code block matches
    let lastIndex = 0;
    let match;
    while ((match = codeBlockRegex.exec(message)) !== null) {
        if (match.index > lastIndex) {
            const textBeforeCode = document.createTextNode(message.substring(lastIndex, match.index));
            messageElement.appendChild(textBeforeCode);
        }

        const language = match[1] ? match[1].toLowerCase() : null;
        const codeContent = match[2];
        const codeBlock = createCodeBlock(language, codeContent);
        messageElement.appendChild(codeBlock);

        lastIndex = match.index + match[0].length;
    }

    // Process inline code matches
    processCodeMatches(message.match(inlineCodeRegex), null);

    // Process specific code structures
    processCodeMatches(message.match(htmlTagRegex), 'html');
    processCodeMatches(message.match(jsCodeRegex), 'javascript');
    processCodeMatches(message.match(jsCommentRegex), 'javascript-comment');
    processCodeMatches(message.match(cssCodeRegex), 'css');
    processCodeMatches(message.match(cssCommentRegex), 'css-comment');

    // Add any remaining text after the last code block
    if (lastIndex < message.length) {
        const textAfterCode = document.createTextNode(message.substring(lastIndex));
        messageElement.appendChild(textAfterCode);
    }

    chatOutput.appendChild(messageElement);
    chatOutput.scrollTop = chatOutput.scrollHeight;
}


        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>