PonyWave-Tools/depp_gpt/index.html

<!--DeppGPT Start-->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeppGPT</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        :root {
            --primary-color: #0E766C;
            --secondary-color: #264044;
            --accent-color: #009688;
            --text-light: #ffffff;
            --background-light: #f5f5f5;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: var(--background-light);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Header Styles */
        .header {
            background: var(--primary-color);
            color: var(--text-light);
            padding: 1rem;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Main Container */
        .main-content {
            flex: 1;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
            width: 100%;
        }

        /* Chat Container */
        .chat-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: 500px;
            display: flex;
            flex-direction: column;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* Message Styles */
        .message {
            max-width: 75%;
            padding: 12px 18px;
            border-radius: 20px;
            line-height: 1.4;
            word-break: break-word;
        }

        .user-message {
            align-self: flex-end;
            background: var(--primary-color);
            color: var(--text-light);
        }

        .bot-message {
            align-self: flex-start;
            background: var(--secondary-color);
            color: var(--text-light);
        }

        /* Input Area */
        .input-container {
            display: flex;
            gap: 10px;
            padding: 20px;
            background: white;
            border-top: 1px solid #eee;
        }

        .input-field {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }

        .send-button {
            background: var(--primary-color);
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .send-button:hover {
            background: var(--accent-color);
        }

        /* Footer Styles */
        .footer {
            background: var(--primary-color);
            color: var(--text-light);
            text-align: center;
            padding: 1rem;
            margin-top: auto;
            font-size: 0.9em;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .chat-container {
                height: 400px;
            }
            
            .message {
                max-width: 85%;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .chat-container {
                height: 300px;
            }
            
            .input-container {
                flex-direction: column;
            }
            
            .send-button {
                width: 100%;
            }
        }
		
        /* Loading Animation Styles */
        .send-button {
            position: relative;
            width: 80px;
        }
        
        #buttonText,
        #ellipsis {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .ellipsis div {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fff;
            margin: 0 2px;
            animation: ellipsis 1s infinite;
        }
        
        .ellipsis div:nth-child(2) { animation-delay: 0.2s; }
        .ellipsis div:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes ellipsis {
            0% { transform: scale(0); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>DeppGPT</h1>
    </header>

    <main class="main-content">
        <div class="chat-container">
            <div class="chat-messages" id="chat-container"></div>
            <div class="input-container">
                <input type="text" class="input-field" id="user-input" placeholder="Schreibe eine Nachricht...">
                <button class="send-button" id="send-button">
                    <div id="buttonText">Senden</div>
                    <div class="ellipsis" id="ellipsis" style="display: none;">
                    <div></div>
                    <div></div>
                    <div></div>
                    </div>
                </button>
            </div>
        </div>

        <div class="button-container">
            <button class="save-button" id="save-button">Chat als Bild speichern</button>
        </div>
    </main>

    <footer class="footer">
        Geklaut von Postillon und überarbeitet von Akamaru
    </footer>

<script>
    const chatGPTContainer = document.getElementById('chat-container');
    const maxMessages = getRandomInt(3, 5);
    let messageCount = 0;
    let serverOverloaded = false;
    let sendButtonActive = true;

    // Event-Listener für Enter-Taste
    document.querySelector('.input-field').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            sendChatGPTMessage();
        }
    });

    // Event-Listener für Send-Button
    document.getElementById('send-button').addEventListener('click', sendChatGPTMessage);

    async function sendChatGPTMessage() {
        if (!sendButtonActive) return;

        const userInput = document.querySelector('.input-field');
        let message = userInput.value.trim();

        if (message) {
            userInput.value = '';
            sendButtonActive = false;
            toggleLoading(true);
            messageCount += 1;

            // User-Nachricht anzeigen
            const userMessageElement = document.createElement('div');
            userMessageElement.className = 'message user-message';
            userMessageElement.innerText = message;
            chatGPTContainer.appendChild(userMessageElement);
            chatGPTContainer.scrollTop = chatGPTContainer.scrollHeight;

            if (messageCount <= maxMessages && !serverOverloaded) {
                showChatGPTLoadingAnimation();

                // API-Aufruf
                const response = await getCompletion(message);
                const answer = response;

                setTimeout(() => {
                    hideChatGPTLoadingAnimation();
                    const botMessageElement = document.createElement('div');
                    botMessageElement.className = 'message bot-message';
                    chatGPTContainer.appendChild(botMessageElement);

                    // Typing-Effekt
                    let index = 0;
                    const typingInterval = setInterval(() => {
                        botMessageElement.innerHTML += answer[index];
                        index++;

                        if (index === answer.length) {
                            clearInterval(typingInterval);
                            toggleLoading(false);
                            sendButtonActive = true;

                            if (serverOverloaded) {
                                showServerOverloadedMessage();
                            } else if (messageCount === maxMessages) {
                                showExitMessage();
                            }
                        }
                        chatGPTContainer.scrollTop = chatGPTContainer.scrollHeight;
                    }, 25);
                }, 1000);
            } else {
                toggleLoading(false);
                sendButtonActive = true;
            }
        }
    }

    let messages = [];
    let serverURL = null;

    function getDeepGPTVersionHost(probability) {
        if (probability < 0 || probability > 1) {
            throw new Error("Probability must be between 0 and 1.");
        }

        var randomNum = Math.random();
        return randomNum < probability ? 
            "https://europe-west1-deppgpt.cloudfunctions.net/DeppGPTRelease221" :
            "https://europe-west1-deppgpt.cloudfunctions.net/DeppGPTRelease20";
    }

    async function getCompletion(userMessage) {
        messages.push({ role: "user", content: userMessage });

        if (!serverURL) {
            if (isGreeting(userMessage)) {
                serverURL = getDeepGPTVersionHost(0.2);
            } else if (isQuestion(userMessage)) {
                serverURL = getDeepGPTVersionHost(0.8);
            } else {
                serverURL = getDeepGPTVersionHost(0.5);
            }
        }

        const response = await fetch(serverURL, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ messages, maxMessages }),
        });

        if (response.ok) {
            const data = await response.json();
            const assistantMessage = data.answer;
            messages.push({ role: "assistant", content: assistantMessage });
            return assistantMessage;
        } else {
            serverOverloaded = true;
            const errorMessages = [
                "Ich kriege gerade so viele Anfragen von so unfÃ¤higen Leuten wie dir, ich brauch grad echt mal ne Pause. Komm spÃ¤ter wieder. Oder besser noch gar nicht!",
                "Ich habe gerade genug von all den Leuten, die nicht wissen, was sie tun. Ich brauche einen Moment. Komm spÃ¤ter zurÃ¼ck, wenn Ã¼berhaupt!",
                "Ich bin gerade von all den Anfragen von Leuten wie dir Ã¼berschwemmt, die keine Ahnung haben. Ich muss durchatmen. Vielleicht kommst du spÃ¤ter zurÃ¼ck, oder besser noch, gar nicht!",
                "Ich bin gerade von all den Anfragen Ã¼berfordert. Ich muss mich sammeln. Bitte komm spÃ¤ter wieder, oder vielleicht sogar nie wieder!",
                "Ich bin gerade mit Anfragen von Leuten Ã¼berhÃ¤uft, die einfach keinen Plan haben. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder besser noch, gar nicht!",
                "Ich habe gerade genug von all den nutzlosen Anfragen. Ich brauche einen Moment fÃ¼r mich. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von Menschen Ã¼berwÃ¤ltigt, die einfach nicht wissen, was sie tun. Ich brauche eine Auszeit. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade mit sinnlosen Anfragen Ã¼berhÃ¤uft. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich habe gerade genug von all den Ahnungslosen, die mich belÃ¤stigen. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade Ã¼berfordert von all den Anfragen von Leuten, die nichts kapieren. Ich brauche eine Auszeit. Komm spÃ¤ter wieder, oder vielleicht besser nicht!",
                "Ich habe gerade genug von all den Anfragen von Leuten, die keine Ahnung haben. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder besser noch, gar nicht!",
                "Ich bin gerade von den Anfragen von Menschen, die nicht wissen, was sie tun, Ã¼berschwemmt. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder am besten gar nicht!",
                "Ich bin gerade von nutzlosen Anfragen Ã¼berhÃ¤uft. Ich brauche eine Auszeit. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade Ã¼berfordert von all den Anfragen von Leuten, die einfach keinen Plan haben. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich habe gerade genug von all den Leuten, die mich belÃ¤stigen. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade von all den Anfragen Ã¼berwÃ¤ltigt, die ich bekomme. Ich brauche eine Auszeit. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von all den Anfragen von Leuten, die nichts verstehen, Ã¼berwÃ¤ltigt. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht besser nicht!",
                "Ich habe gerade genug von all den Anfragen von Leuten, die keinen Sinn ergeben. Ich brauche eine Auszeit. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von Anfragen Ã¼berhÃ¤uft, die keinen Sinn ergeben. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von Leuten Ã¼berwÃ¤ltigt, die einfach nicht wissen, was sie tun. Ich brauche eine Auszeit. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade Ã¼berfordert von all den Anfragen von Leuten, die einfach keinen Plan haben. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich habe gerade genug von all den nutzlosen Anfragen. Ich brauche einen Moment fÃ¼r mich. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von Menschen Ã¼berwÃ¤ltigt, die einfach nicht wissen, was sie tun. Ich brauche eine Auszeit. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade mit sinnlosen Anfragen Ã¼berhÃ¤uft. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich habe gerade genug von all den Ahnungslosen, die mich belÃ¤stigen. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade Ã¼berfordert von all den Anfragen von Leuten, die nichts kapieren. Ich brauche eine Auszeit. Komm spÃ¤ter wieder, oder vielleicht besser nicht!",
                "Ich habe gerade genug von all den Anfragen von Leuten, die keine Ahnung haben. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder besser noch, gar nicht!",
                "Ich bin gerade von den Anfragen von Menschen, die nicht wissen, was sie tun, Ã¼berschwemmt. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder am besten gar nicht!",
                "Ich bin gerade von nutzlosen Anfragen Ã¼berhÃ¤uft. Ich brauche eine Auszeit. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade Ã¼berfordert von all den Anfragen von Leuten, die einfach keinen Plan haben. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich habe gerade genug von all den Leuten, die mich belÃ¤stigen. Ich brauche eine Pause. Versuch es spÃ¤ter nochmal, oder am besten gar nicht!",
                "Ich bin gerade von all den Anfragen Ã¼berwÃ¤ltigt, die ich bekomme. Ich brauche eine Auszeit. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von all den Anfragen von Leuten, die nichts verstehen, Ã¼berwÃ¤ltigt. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht besser nicht!",
                "Ich habe gerade genug von all den Anfragen von Leuten, die keinen Sinn ergeben. Ich brauche eine Auszeit. Komm spÃ¤ter wieder, oder vielleicht auch nicht!",
                "Ich bin gerade von Anfragen Ã¼berhÃ¤uft, die keinen Sinn ergeben. Ich brauche eine Pause. Komm spÃ¤ter wieder, oder vielleicht auch nicht!"
            ];
            const randomIndex = Math.floor(Math.random() * errorMessages.length);
            const errorMessage = errorMessages[randomIndex];
            messages.push({ role: "assistant", content: errorMessage });
            return errorMessage;
        }
    }

    function showChatGPTLoadingAnimation() {
        const loadingElement = document.createElement('div');
        loadingElement.className = 'loading-animation';
        chatGPTContainer.appendChild(loadingElement);
        chatGPTContainer.scrollTop = chatGPTContainer.scrollHeight;
    }

    function hideChatGPTLoadingAnimation() {
        const loadingElement = document.querySelector('.loading-animation');
        if (loadingElement) {
            loadingElement.remove();
        }
    }

    function showServerOverloadedMessage() {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message bot-exit-message';
        messageDiv.textContent = 'Unsere Server sind gerade überlastet, bitte versuche es später noch einmal!';
        chatGPTContainer.appendChild(messageDiv);
    }

    function showExitMessage() {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message bot-exit-message';
        messageDiv.textContent = 'FunGPT hat den Chat verlassen.';
        chatGPTContainer.appendChild(messageDiv);
    }

    function toggleLoading(isLoading) {
        const buttonText = document.getElementById("buttonText");
        const ellipsis = document.getElementById("ellipsis");

        if (isLoading) {
            buttonText.style.display = 'none';
            ellipsis.style.display = 'block';
        } else {
            buttonText.style.display = 'block';
            ellipsis.style.display = 'none';
        }
    }

    function isGreeting(sentence) {
        const greetingKeywords = ['hallo', 'hi', 'guten tag', 'grüß dich', 'moin', 'servus', 'hey', 'huhu', 'grüezi', 'sers', 'salut', 'willkommen', 'tach', 'tschüss', 'ahoi', 'na', 'tagchen', 'griaß di', 'griaß enk', 'juten tach', 'hallöchen', 'hallöle', 'grüssle', 'grüß gott', 'mahoin'];
        return greetingKeywords.some(word => sentence.toLowerCase().startsWith(word));
    }

    function isQuestion(sentence) {
        sentence = sentence.trim();
        if (sentence.endsWith('?')) return true;

        const questionWords = ['wer', 'wen', 'wem', 'wessen', 'was', 'wann', 'wo', 'warum', 'wie'];
        return questionWords.some(word => sentence.toLowerCase().startsWith(word));
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Save Button Functionality
    document.getElementById('save-button').addEventListener('click', function () {
        var chatWindow = document.querySelector('.chat-messages');
        
        if (navigator.userAgent.indexOf("gonative") !== -1) {
            let serializedChildren = serializeDivChildren(chatWindow);
            let json = JSON.stringify(serializedChildren);
            let encodedJson = encodeURIComponent(json);
            let url = "https://postillon-test.blogspot.com/p/deppgpt-download-page.html?data=" + encodedJson;
            window.location.href = url;
        } else {
            var chatWindowCopy = chatWindow.cloneNode(true);
            chatWindowCopy.id = 'chat-window-copy';

            var chatCopyParent = document.createElement('div');
            chatCopyParent.id = 'chat-window-copy-parent';
            document.body.appendChild(chatCopyParent);

            var totalHeight = 0;
            for (var i = 0; i < chatWindowCopy.children.length; i++) {
                totalHeight += chatWindowCopy.children[i].getBoundingClientRect().height;
                var style = window.getComputedStyle(chatWindowCopy.children[i]);
                totalHeight += parseInt(style.marginTop) + parseInt(style.marginBottom);
                totalHeight += parseInt(style.paddingTop) + parseInt(style.paddingBottom);
            }
            chatWindowCopy.style.height = totalHeight + 'px';

            var logo = document.createElement('img');
            logo.src = 'https://i.imgur.com/t7y28qo.png';

            var footer = document.createElement('img');
            footer.src = 'https://i.imgur.com/4IAxy4D.png';

            chatCopyParent.appendChild(logo);
            chatCopyParent.appendChild(chatWindowCopy);
            chatCopyParent.appendChild(footer);

            setTimeout(function () {
                renderAndDownload(chatCopyParent);
            }, 100);
        }
    });

    function renderAndDownload(element) {
        const popup = $('<div id="popup"></div>');
        const heading = $('<h2>Chat wird gerendert</h2>');
        heading.css('margin-bottom', '20px');
        popup.append(heading);

        const loadingAnimation = createLoadingAnimation();
        loadingAnimation.css('margin', '0 auto');
        popup.append(loadingAnimation);

        const closeButton = $('<button id="close-button">X</button>');
        closeButton.css({
            'position': 'absolute',
            'right': '10px',
            'top': '10px',
        });
        closeButton.click(function () {
            popup.remove();
        });
        popup.append(closeButton.clone(true));

        popup.css({
            'position': 'fixed',
            'top': '50%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)',
            'z-index': '1000',
            'background': '#fff',
            'padding': '20px',
            'border-radius': '8px',
            'box-shadow': '0 0 10px rgba(0, 0, 0, 0.1)',
            'text-align': 'center',
            'width': '80%',
            'box-sizing': 'border-box',
            'max-height': '90vh',
            'overflow-y': 'hidden',
        });

        $('body').append(popup);

        html2canvas(element, { useCORS: true }).then(function (canvas) {
            const imgData = canvas.toDataURL("image/png");
            const img = $('<img id="captured-image" src="' + imgData + '" alt="Rendered chat">');
            img.css({
                'display': 'block',
                'margin': '0 auto',
                'border': 'none',
                'max-width': '50vw',
                'max-height': '70vh',
            });

            popup.empty();
            popup.append(img);

            const downloadButton = $('<button id="download-button">Download</button>');
            downloadButton.css({
                'display': 'block',
                'margin': '20px auto',
            });

            downloadButton.click(async function () {
                const a = document.createElement('a');
                a.href = imgData;
                const date = new Date();
                const filename = `FunGPT_CHAT_${date.getFullYear()}${('0' + (date.getMonth() + 1)).slice(-2)}${('0' + date.getDate()).slice(-2)}_${('0' + date.getHours()).slice(-2)}${('0' + date.getMinutes()).slice(-2)}${('0' + date.getSeconds()).slice(-2)}.png`;
                if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
                    a.target = '_blank';
                } else {
                    a.download = filename;
                }
                a.click();
            });
            popup.append(downloadButton);
            popup.append(closeButton.clone(true));
        });
    }

    function serializeDivChildren(element) {
        let serializedChildren = [];
        for (let child of element.children) {
            if (child.tagName.toLowerCase() === 'div') {
                serializedChildren.push({
                    classes: [...child.classList],
                    innerText: child.innerText
                });
            }
        }
        return serializedChildren;
    }

    function createLoadingAnimation() {
        const loadingAnimation = $('<div id="loading-animation"></div>');
        loadingAnimation.css({
            'border': '16px solid #f3f3f3',
            'border-top': '16px solid #3498db',
            'border-radius': '50%',
            'width': '120px',
            'height': '120px',
            'animation': 'spin 2s linear infinite',
        });

        const style = $('<style>@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}</style>');
        $('html > head').append(style);

        return loadingAnimation;
    }
</script>
</body>
</html>
<!--DeppGPT Ende-->