Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT Chat Interface</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            margin: 0;
        }

        #chat-container {
            width: 600px; /* Increased width */
            height: 80vh;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #header-container {
            text-align: center;
            padding: 20px;
            border-bottom: 1px solid #ddd;
        }

        #chat-box {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
        }

        #user-input-container {
            display: flex;
            border-top: 1px solid #ddd;
        }

        #user-input {
            flex: 1;
            padding: 10px;
            border: none;
            outline: none;
        }

        #send-button {
            width: 60px;
            border: none;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #send-button:hover {
            background-color: #0056b3;
        }

        .message {
            margin: 10px 0;
        }

        .message strong {
            display: block;
            margin-bottom: 5px;
        }

        .link-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .link-container a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
            transition: color 0.3s;
        }

        .link-container a:hover {
            color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="header-container">
            <h2>MindStudio Assistant by Halyard Consulting</h2>
            <p>MindStudio Virtual Assistant guides you in crafting intelligent bots. It offers tutorials, custom workflow recommendations, and troubleshooting for all skill levels.</p>
        </div>
        <div id="chat-box">
            <div class="message">Welcome to the MindStudio Assistant GPT chat! Type a message to get started.</div>
        </div>
        <div id="user-input-container">
            <input type="text" id="user-input" placeholder="Type your message here...">
            <button id="send-button">Send</button>
        </div>
    </div>
    <script>
        document.getElementById('send-button').addEventListener('click', async () => {
            const userInput = document.getElementById('user-input').value;
            if (!userInput) return;

            const chatBox = document.getElementById('chat-box');
            chatBox.innerHTML += `<div class="message"><strong>You:</strong> ${userInput}</div>`;
            
            document.getElementById('user-input').value = '';

            try {
                const response = await fetch('https://api.openai.com/v1/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer sk-proj-0riPJGYEucJhAz7Dp35xT3BlbkFJYh7a5fJPLPsb4qbMY6IH'  // Replace with your actual API key
                    },
                    body: JSON.stringify({
                        model: 'text-davinci-003',  // Specify the model
                        prompt: userInput,
                        max_tokens: 150
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json();
                const gptResponse = data.choices[0].text.trim();

                chatBox.innerHTML += `<div class="message"><strong>GPT:</strong> ${gptResponse}</div>`;
                chatBox.scrollTop = chatBox.scrollHeight;
            } catch (error) {
                chatBox.innerHTML += `<div class="message"><strong>Error:</strong> ${error.message}</div>`;
                console.error('Error:', error);
            }
        });
    </script>
</body>
</html>
